前端+node.js(vue+express)部署到阿里云

vue+express部署到阿里云

使用的阿里云服务器CentOS 7.3

一，登录对应的服务器

二，在服务器进行对应的初始化

yum install -y nginx
yum install -y nodejs
yum install -y mariadb
npm install pm2 -g
npm install express -g

1.初始化数据库

mysql_secure_installation         #直接执行初始化命令，会弹出交互配置信息
Enter current password for root (enter for none):#初次进入密码为空，直接回车
New password:                #输入要为root用户设置的数据库密码。
Re-enter new password:            #重复再输入一次密码。
Remove anonymous users? [Y/n] y      #删除匿名帐号
Disallow root login remotely? [Y/n] n     #是否禁止root用户从远程登录
Remove test database and access to it? [Y/n] y  #是否删除test数据库，想留着也随意
Reload privilege tables now? [Y/n] y        #刷新授权表，让初始化后的设定立即生效

2.登录数据库
mysql -u root -p

创建对应的数据库，执行对应的sql文件

navicat连接阿里云数据库

阿里云开放mysql的3306端口

1.登入mysql
2.GRANT ALL PRIVILEGES ON . TO 'root'@'%' IDENTIFIED BY '您的数据库密码' WITH GRANT OPTION;
3.flush privileges;

navicat配置如下

三，将前端项目进行打包

npm run bulid

打包完成后将对应的dist文件上传到服务器

将服务端上传

四，配置nginx

使用find命令查找对应的nginx目录

find / -name nginx
cd /etc/nginx
vim nginx.conf

进入nginx的配置文件，配置server。

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  47.102.100.226;   #有域名的话替换成域名
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
         root /usr/code/dist/;   #你的打包项目上传的目录
         index index.html;
        }
        location /api/{
         proxy_pass http://127.0.0.1:3000;  #配置的路径代理
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

保存对应的文件，重读nginx配置

nginx -s reload 

如果失败，尝试以下

nginx -c /etc/nginx/nginx.conf

然后再次重启

还是不行的话

service nginx stop
service nginx start

五，阿里云开放对应的端口

这里需要开放mysql 的3306端口 //外网navicat连接数据库
需要开放http的80端口
需要开放express默认的3000端口

六，进入服务器的目录

执行

npm install
npm start

可以进入网页进行测试，如果配置正常，即可正常访问网页，

如果请求发生404，在服务器项目中的路由进行如下配置

修改路由，即在app.js，增加一个api

七，服务器永久运行

pm2 start bin/www