本篇配置不在docker内实现build，而是外部build
1. 根目录创建Dockerfile文件
FROM nginx
COPY ./build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
2. 根目录创建nginx.conf文件
server {
server {
listen 80;
# gzip config
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
root /usr/share/nginx/html;
location / {
try_files $uri $uri/ /index.html;
}
# 后台服务器地址
location /v1/ {
proxy_pass http://127.0.0.1:8088/v1/;
}
}
nginx镜像有一个默认的配置文件 default.conf
默认的配置有一个问题, 在非首页的路由页面刷新就会报404错误
我们使用 react-router 作为路由管理，在开发端的express服务器下运行和测试表现均正常，部署到线上的nginx服务器后，还需要对该应用在nginx的配置里作相应调整，否则浏览器将不能正常刷新，表现为页面不显示或页面跳转错误等异常。原因在于这些react应用在运行时会更改浏览器uri而又不真的希望服务器对这些uri去作响应，如果此时刷新浏览器，服务器收到浏览器发来的uri就去寻找资源，这个uri在服务器上是没有对应资源，结果服务器因找不到资源就发送403错误标志给浏览器。所以，我们要做的调整是：浏览器在使用这个react应用期间，无论uri更改与否，服务器都发回index.html这个页面就行。
3. 执行命令
- 进入项目根目录，先build
npm install
npm run build
- docker构建镜像
docker build -t my-image .
- 根据镜像创建容器
docker run --name custom-image --net=host -d -p 80:80 my-image
4. 测试镜像
打开浏览器，访问 localhost:80。出现如下页面表示工作正常，测试通过。
