前端运行有几种方式:
开发环境:采用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后进行启动。
因此,生产环境的部署步骤如下:
- npm run build (用webpack打包为build文件夹)
- 拷贝build文件夹和server.js到node服务容器里(start.sh其实可以不需要,直接执行里面的命令即可)
- node server启动即可。
注意,一定要配合一个设置好路由关系的nginx,前端才能正常work,否则只能打开首页。
由上可知,生产环境也可以直接使用nginx,会有如下2个好处:
- 使用nginx,可以只需要build文件夹即可,无需server.js文件,更为简洁。
- 原来的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/ |