第一次将Vue-node.js前后端代码发布到服务器运行

Posted 2022-06-12 peatechen

1. 生产环境的编译

在本地启动vue项目时，一般都是分别 npm run serve启动 客户端的web，后台管理端的admin，服务端的server，然而要发布到服务器上时只会启动一个server项目，那么现在将前端工程编译到server目录下

• 在前端工程目录的src目录下创建一个名为 .env.development 的配置文件，内容为 VUE_APP_API_URL=http://localhost:8001 的一个变量，它最好以VUE_APP开头 ，将axios的baseURL换成baseURL: process.env.VUE_APP_API_URL || ‘/‘ 本地运行时会含有process.env ，而线上没有这个属性。

• 在工程文件admin根目录下添加一个vue-cli配置文件 vue.config.js 内容如下

  
    module.exports= 
        outputDir: __dirname + '/../server/admin',         // 将生成好的dist文件放到服务端目录下面
  
        publicPath: process.env.NODE_ENV === 'production'        // 将客户端里面原来的文件引用地址换成服务端里各文件所在的路径
        ? '/admin/'
        : '/'
    

• 添加客户端对服务器静态文件访问的能力。

  
        server.use('/',express.static(__dirname + '/web'));    // 当访问peatechen.com/ 时为客户端
        server.use('/admin',express.static(__dirname + '/admin'));    // 当访问peatechen.com/admin时为后台管理端

2. nginx反向代理

server工程在服务器上启动后向外暴漏的还是一个服务器的本地ip和端口，通过外网是无法访问的，这时就需要用nginx将外网访问请求代理到本地的端口，这里使用一个配置nginx反向代理的网站生成配置文件，https://nginxconfig.io ，在/etc/nginx/sites-enabled/目录下加入生成后的配置文件，在/etc/nginx/下加入名为nginxconfig.io的文件夹

3. pm2启动server工程

进入server目录下，pm2 start index.js 启动