Deploy create-react-app with PM2

2018-11-06 本文已影响7人 fanlehai

Deploy create-react-app with PM2

作者 | 2018年11月06日16:40:46

【目的】

我们用create-react-app开发了app，服务器部署步骤：ssh连接服务器->git clone最新代码->重新build->再部署到nginx；

【解决方案】

上面这个部署步骤可否自动化操作，当然可以，使用PM2一键自动化发布更新新app；
在本地机器使用ssh连接登录远程服务端，使用pm2把app部署完毕；

【实现】

第一步：必要环境：

服务器
- 系统：Ubuntu 16.04 64位；
- 有环境：nginx、ssh、git、node、npm install -g pm2
- 在服务器可以使用git clone git@,即表示可以有git环境；
本地(local)
- 使用create-react-app创建开发app完毕准备发布部署服务器；
- 有ssh、node、pm2环境;
- create-react-app创建的app已经提交到github.com上;

第二步：app配置

PM2相关配置:

cd到create-react-app的app根目录；创建pm2的配置文件：pm2 ecosystem
在本目录下会自动生成文件：ecosystem.config.js
修改ecosystem.config.js文件：nano ecosystem.config.js

module.exports = {
    apps: [{
        name: 'learn-anything',
        script: 'npm',
        args: 'run start:production',
        // cluster mode 根据cpu个数启动最大进程数量
        instances: 0 ,
        autorestart: true,
        watch: false,
        max_memory_restart: '1G',
        env_production: {
          NODE_ENV: 'production'
        }
    }],
    deploy: {
        production: {
          user: 'user',//服务器用户名
          host: 'ip',//服务器ip
          ref: 'origin/master',
          repo: 'git@github.com:test/test.git',
          path: '/var/www/test',//项目部署到服务器目录
          ssh_options: ['ForwardAgent=yes'],
          'post-deploy': 'npm install && pm2 reload ecosystem.config.js --env production'
        }
    }
};

app配置

cd到app根目录；
修改package.json文件，使用nano package.json或者用Visual Studio Code；修改其中scripts模块：

"scripts": {
    "start": "react-scripts start",
    "start:production": "npm run build && npm run start:prod",
    "start:prod": "NODE_ENV=production serve build -s",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },

运行部署

本地ssh远程连接到服务器，实现免密登录
安装服务配置：pm2 deploy ecosystem.config.js production setup
pm2 deploy ecosystem.config.js production --force
修改服务端nginx配置文件：nano /etc/nginx/sites-available/default

location / {
    proxy_pass http://127.0.0.1:5000;
    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_http_version  1.1;
    proxy_connect_timeout 1;
    proxy_send_timeout 30;
    proxy_read_timeout 60;
}

Deploy create-react-app with PM2

Deploy create-react-app with PM2

【目的】

【解决方案】

【实现】

参考链接

猜你喜欢

热点阅读