Vue Nginx Node PM2 反向代理项目部署

Posted 2021-02-14 lakemonster

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue Nginx Node PM2 反向代理项目部署相关的知识，希望对你有一定的参考价值。

Vue nginx Node PM2 项目部署

个人回忆使用,不是太详细,会的人应该能懂.

服务器

阿里云购买的 ECS
有个服务器,建议买个域名,但是没有域名需要备案,比较麻烦,我的还在备案中,所以就用ip来做测试
ECS => 实例 => 安全组配置 => 配置规则 => 快速配置打开80端口

不会的百度,一大堆
1. 解析域名什么的,添加到解析列表里面,就好了

Node

测试项目是一个教程,前后端分离,便于测试 client node-app 两个部分

node 项目里面没啥说的,只是写法不一样.
关于IP有大佬详解

0.0.0.0什么鬼

// 第一种
 // 这一种很简单,
const app = express();
...
const port = 5001;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

// 第二种

...
var http = require('http');
http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('hello node js');
    
}).listen(5001,"0.0.0.0");

// 这种类型 0.0.0.0 任意IP可以访问

node 项目package.json文件

安装pm2

npm install -g pm2

    2. 可能会出现安装失败的问题,建议在管理员命令窗口执行

Vue

在Vue中需要更改配置文件,设置代理

根据Vue cli版本不同 webpack的配置文件也不一样,我用的是3.0 ,文件名vue.config.js,其他版本自行百度,都一样

    devServer: {
        open: true,
        host: 'localhost',
        port: 8081,
        https: false,
        hotOnly: false,

        proxy: { // 配置跨域
            '/api': {
                target: 'http://4x.xxx.128.95/api/', //服务器ip
                ws: true,
                changOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },

        before: app => { }
    }

这部分就是我node上的接口地址

app.use('/api/users', users);
app.use('/api/profile', profiles);

Nginx

百度吧太复杂,推荐技术胖

技术胖
配置文件
```
   cd ~
   cd /etc/nginx/conf.d
```

新建一个配置文件

vim web-test.conf

upstream zijinguanli {
 server 127.0.0.1:5001;
 keepalive 64;
}

server {
 listen 80;
 server_name 4x.1xx.1xx.xx;

 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://zijinguanli;  //和upstream 后面一致,反向代理
 }
}

suod nginx -t

//出现表示成功
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful