vue项目上线部署到CentOS7阿里云服务器

1.相关准备

在此之前，已经将express构建的菜鸟接口部署到CentOS7服务器，Linux服务器前端相关环境搭建乃至vue部署全程注意点都在之前记录下来了https://blog.csdn.net/s18438610353/article/details/100822617。由于目前没有系统的学习过nginx，所以nginx在此次部署中只起到了监听80端口从而达到隐藏域名后端口的效果，而vue打包后的对index.html的访问则通过express代理实现。

2. 打包与配置

运行 npm run build并将dist文件夹通过Xftp传入服务器不必多言，关键是怎么访问这些静态资源，显然，直接通过index.html访问是不可行的。

1. 安装express
   npm install -g express-generator
npm install -g express
   从4.x起具体不记得是哪个版本了…，express-generator与express分离了

2. 测试是否成功
   express --version
   

3. 在dist目录的当前目录下，初始化package.json文件

	npm init

4. 安装 express
npm i express --save
5. 初始化app.js
touch app.js
6. 如果vue-router中使用history模式需要安装connect-history-api-fallback
   否则静态资源会访问不到
   npm i -g connect-history-api-fallback
7. 编辑app.js文件
   vim app.js

const express = require('express')
const path = require('path')
const app = express()

// vue-router history模式引入connect-history-api-fallback中间件
const history = require('connect-history-api-fallback')
// 这句代码需要放在express.static上面
app.use(history())
app.use(express.static(path.join(__dirname, 'dist')))
app.listen(8080, () => {
    console.log('app listening on port 8080')
})

（记得我第一次试用一个月服务器的时候配置的app.js比这个复杂，后来比较懒，没有迁移，就再也找不到了）

8. 配置nginx.conf

server {
    listen 80;
    server_name www.tudoudou2.com;
    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host  $http_host;
        proxy_set_header X-Nginx-Proxy true;
        proxy_set_header Connection "";
        proxy_pass      http://127.0.0.1:8080;
    }
}

(nginx相关重启和生效命令见Node项目线上部署)

9. 启动app.js
   pm2 start app.js
10. 时刻需要注意端口的放行和安全组规则配置
    见上Node项目线上部署