Deploy create-react-app with PM2

Deploy create-react-app with PM2

作者 | 2018年11月04日23:35:33

【目的】

• 我们用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;
  }
  

参考链接

• 查看原文 >>
• 知识图谱 >>
• https://www.jianshu.com/p/9680c87a3696
• https://ygamretuta.xyz/deploy-create-react-app-with-pm2-16beb90ce52
• https://www.jianshu.com/p/b1ef65afe2a7
• https://andrewpark.ca/blog/create-and-deploy-a-react-app/
• https://www.cnblogs.com/feiyu6/p/8819453.html#deployment
• https://www.cnblogs.com/feiyu6/p/8819453.html
• http://hoxz.me/2018/04/23/react-project-deploy/
• https://segmentfault.com/a/1190000013707315
• https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app