docker部署react项目

本篇配置不在docker内实现build，而是外部build

1. 根目录创建Dockerfile文件

FROM nginx
COPY ./build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

更多关于dockerfile指令详解

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

docker使用镜像

4. 测试镜像

打开浏览器，访问 localhost:80。出现如下页面表示工作正常，测试通过。

参考文档：https://segmentfault.com/a/1190000010415158