Vue+Node全栈项目部署到云服务器

前言

本次毕业项目实现了全栈开发，使用到的技术栈为：Vue + Vant + Node.js + Koa2 + MySQL + TypeScript，为了把项目部署到云服务器，还是折腾了一段时间，接下来记录一下最终摸索出来的部署过程。

服务器和目录介绍

阿里云服务器，CentOS 7.3

Youth-Hostel
├── client  // 前端 Vue 工程
├── db      // 后端 Node 工程
├── logs    // 后端日志
├── package-lock.json
├── package.json
├── public  // 上传头像存放处，存放地址已更改至服务器
└── README.md

完成本地调试

安装 concurrently
1
npm i concurrently --save

修改 package.json 的 script

此时，在本地调试时，只运行一条命令 npm run dev，就可以同时启动前后端工程项目

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "client": "npm start --prefix client",
    "server": "nodemon ./db/index.ts",
    "dev": "concurrently \"npm run server\" \"npm run client\""
}

本地修改文件

修改 client->src->router->index.js 的 mode 值

const router = new Router({
    mode: 'hash', 
    routes
})

修改 config/index.js 的 assetsPublicPath 为 ./**（注意一定是 **build 里面的，上面 dev 中也有这个配置）
打包成 dist文件，然后扔到服务器中

服务器部署

配置 Nginx

服务器需要安装 Nginx，安装后通过 nginx -v 查看是否成功

修改 Nginx 的配置文件，前面在部署项目到服务器文章中有介绍，接下来需要增加修改

server {
        listen       80 default_server; # 项目跑的端口
        listen       [::]:80 default_server;
        server_name   _; # 当前服务器ip
        root         /var/www;

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

        location / {}

        location /api { # 重点：请求跨域时配置端口转发
          proxy_pass http://101.133.132.172:4442/api; # 重点：转发地址
        }

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

如果 Nginx 不进行跨域的配置，虽然项目部署了，但是服务也访问不到

上传文件

把 client->dist 里面的文件扔到服务器配置的地址 /var/www，个人使用 FileZilla 软件
把 db 整个文件夹扔到 /var/www
在 /var/www 创建 logs 和 public 目录，放日志和头像等文件
将本地项目的根目录 package.json 扔到 /var/www
使用 xshell 软件连接服务器，进入到 /var/www 目录中，执行 npm install （如果权限不够，执行命令： sudo npm install）