egg.js+vue.js 云服务器部署 -- 项目部署

上一章把云服务器的环境都配置好了，现在开始我们的项目部署；

egg.js+vue.js 云服务器部署 -- 环境配置；

---

一、后台服务部署；

1、首先我们先把项目从git 上 clone下来；不在git的也可以通过Xftp 上传至服务器，接下来就是熟悉的味道,

cnpm install安装依赖包；

2、我的项目是用 egg-sequelize 构建的数据库，所以我这里直接使用命令生成对应的数据库和表；

# 升级数据库
npx sequelize db:migrate

其他同学可以自行建库建表；

3、接着便是启动egg服务；

npm run start

框架内置了 egg-cluster 来启动 Master 进程，Master 有足够的稳定性，不再需要使用 pm2 等进程守护模块。

默认开启了7001端口，接着便可通过ip:7001访问接口，查看接口是否正常；

如有报错，可到/root/logs 目录查看日志并排查

详见官网；

后端部署就完成了！

二、前端页面部署；

由于我是用了前后端分离，前端用vue3.0+ts 写的，打包压缩后的目录就用nginx启动服务，反向代理；本人对nginx亦是一窍不通，整理众大神文档资料后也算跑起来了，合不合理就不知道了；

1、nginx启动之后默认是代理80端口，所以访问ip可以看到；

2、接下来就是新启动一个端口，代理前端页面；我选择8080；

cd /usr/local/nginx/conf

vim nginx.conf

关于nginx配置问题，网上有太多大神资料，请自行查阅；

3、依葫芦画瓢添加配置

nginx可以有多个server，那么就再简单添加一个server；并在阿里云安全组添加8080端口；

    server {
        listen       8080;
        server_name  localhost:8080;

        location / {
            root   /usr/local/src/web;
            index  index.html;
        }
        location /api/ {
            proxy_pass  http://127.0.0.1:7001/;
            proxy_set_header Host $host:$server_port;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

 

listen 8080 :监听8080端口
localtion / {
    root  //前端项目目录
}  //代理前端静态页面

localtion /api/ {  //转发接口 (/api/的请求会转发至http://127.0.0.1:7001/)
    proxy_pass  http://127.0.0.1:7001/;
}

4、将vue打包后放入 /usr/local/src/web

项目部署完毕，此时便可以通过8080端口访问我自己的网页了，也可以通过编辑并存储数据；美滋滋！