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

标签：detail   class   com   ade   ecs   tps   syntax   rem   bpa   

Vue Nginx Node PM2 项目部署

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

服务器

1. 阿里云购买的 ECS

2. 有个服务器,建议买个域名,但是没有域名需要备案,比较麻烦,我的还在备案中,所以就用ip来做测试

3. ECS => 实例 => 安全组配置 => 配置规则 => 快速配置 打开80端口

   不会的百度,一大堆

   1. 解析域名什么的,添加到解析列表里面,就好了

Node

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

1. node 项目里面没啥说的,只是写法不一样.

2. 关于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可以访问

1. node 项目package.json文件

   1. 安装pm2

      npm install -g pm2

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

Vue

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

2. 根据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

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

   技术胖

2. 配置 文件

   
      cd ~
      cd /etc/nginx/conf.d

3. 新建一个配置文件

   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
   

pm2

然后就是pm2 启动项目

可能会出现防火墙未关闭的问题

1. systemctl stop  firewalld 

这样就完事 当然有大佬详细说明大佬

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

标签：detail   class   com   ade   ecs   tps   syntax   rem   bpa   

原文地址：https://www.cnblogs.com/lakemonster/p/10565254.html