使用nginx取代node.js启动react服务

前端运行有几种方式：

开发环境：采用webpack-dev-server启动

生产环境：通过打包为build文件夹后，采用http服务加载build文件夹。

 

开发环境

在package.json中定义了：

"scripts": { "start": "set NODE_ENV=development && webpack-dev-server --config ./webpack.dev.config.js", "build": "export NODE_ENV=production && rm -rf ./build && webpack", },

因此，npm start 即可使用webpack-dev-server启动http服务。（路由关系，写在了某个js里面，无需nginx即可工作）

 

生产环境

在docker-compose.yml中调用了start.sh，start.sh中的核心是执行了node server

什么是node server? 它并没有在package.json中定义快捷方式。

其实，node server 等于 node server.js，就是加载server.js后进行启动。

 

因此，生产环境的部署步骤如下：

1. npm run build (用webpack打包为build文件夹）
2. 拷贝build文件夹和server.js到node服务容器里（start.sh其实可以不需要，直接执行里面的命令即可）
3. node server启动即可。

注意，一定要配合一个设置好路由关系的nginx，前端才能正常work，否则只能打开首页。

 

由上可知，生产环境也可以直接使用nginx，会有如下2个好处：

1. 使用nginx，可以只需要build文件夹即可，无需server.js文件，更为简洁。
2. 原来的node+nginx的2个服务简化只需要1个nginx服务

改为nginx启动方案，nginx.conf的变更可以参考如下：

# 老实现 #location / { #proxy_pass http://nodeserver; #index index.html index.htm; #} # 新实现 root /frontend; location / { try_files $uri /index.html; index index.html; }

 

nginx: image: nginx:1.16.0 volumes: # 将前端的build文件夹挂载到nginx里 - ./front_end/build:/frontend/