Skip to content

Deploy React App

Jump to bottom
xiaohesong edited this page Apr 23, 2018 · 3 revisions

部署React App.

  • 第一种方法

服务器

  1. 配置nginx
  • 安装
sudo apt-get update
sudo apt-get install nginx
  • 配置
# sudo vim /etc/nginx/sites-available/default
server {
    listen 80 default_server;
    server_name YOUR-SERVER-NAME;
    location / {
        proxy_pass http://localhost:3000; #or any port number here
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}
  • 重启
sudo service nginx reload
sudo service nginx restart
  1. 项目
  • 启动
npm install
npm start

这个时候输入你的ip,就可以访问你的项目了.不过关闭服务器之后,3000端口就停了.这个问题可以使用pm2解决.

sudo npm install pm2 -g
pm2 start npm -- start

这样也可以启动,在后台运行. pm2的命令:

pm2 list all
pm2 stop all
pm2 start all
pm2 delete <name|id>

部署参考

ps: 总感觉这个部署方案有些low,到时改进吧

pm2改进

上面的应该是没有压缩的

  1. 参考这个试试

  • 第二种方法

  1. npm run build
  2. nginx配置
server {
    listen 7878;
    server_name 127.0.0.1;
    root /home/issue/workspace/ums/build;
    location / {
      try_files $uri /index.html;
      add_header   Cache-Control no-cache;
      #expires      1d;
    }
}

部署build之后的参考这里 很简单,找个服务器(nginx或者apache)去跑静态资源, 也可以放在cdn上面跑.

移除可读性源码

  • create-react-app默认会携带源码(可读性的源码)。可以去除。 gaearon-commented.安装下工具，删除map源码就好。
npm install rimraf -D
"scripts": {
...
"postbuild": "rimraf build/**/*.map",
}

然后在build之后删除这个就好了npm run postbuild。

  • GENERATE_SOURCEMAP

上面的方法引入了库，其实看脚手架源码，可以发现有一个变量的，shouldMapSource config GENERATE_SOURCEMAP 直接配置文件里GENERATE_SOURCEMAP=false就可以了。

Clone this wiki locally