前言

本篇文章主要介绍如何通过Docker与Nginx将React App发布到网上，让你的用户通过一个URL可以访问到。至于如何申请域名不在本篇讨论范围。我之前写过一篇文章是关于如何申请ssl证书，将你的WebApp发布成https网站，有兴趣的小伙伴，可以查阅我之前的这篇文章。

话不多说，share一下这篇文章的repo:

gitlab.com/yafeya/reac…

1. 整体结构

Demo中的Docker Container中打包了Nginx Server和我们build好的React-Demo的production环境。

Docker Container将Nginx的默认80端口映射到了host机器上的9981端口，这样，end-user可以通过访问http://host-name:9981来访问到我们的React-app。

docker run -d -p 9981:80 --restart always yafeya/react-demo

2. `Dockerfile`

FROM nginx:stable-alpine

RUN rm -fr /usr/react-demo
RUN mkdir -p /usr/react-demo
COPY ./dist/ /usr/react-demo/

COPY ./nginx.conf /etc/nginx/conf.d/default.conf

RUN ls /usr/react-demo

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Docker Container 基于nginx:stable-alpine这个image创建
将yarn build的结果dist文件夹中的内容，copy到container的/usr/react-demo中
将nginx.conf文件copy到container的/etc/nginx/conf.d/default.conf文件，使对nginx的设置生效
暴露80端口
调用nginx -g daemon off;启动

3. `Nginx`配置

server {
    listen       80;
    server_name  localhost;


    location / {
        root   /usr/react-demo;
        try_files $uri $uri/ /index.html;
	index  index.html;
    }
}

这个里面唯一需要注意的是，下面这句话。主要的作用是使React-Routing生效。意思就是所有的对url的请求都将把url回传给index.html处理。

try_files $uri $uri/ /index.html;

如果没有这句话，如果访问http://[::]/items从页面内部路由过去是可以访问的，但是如果刷新这个URL，将会返回404错误。

4. 编译 & 运行

我在Demo加了一个脚本docker-exec来进行简单的编译运行。

# docker-exec
rm -fr ./node_modules
rm -fr ./dist

npm i
yarn build

docker stop $(docker ps -aq -f ancestor=yafeya/react-demo)
docker rm $(docker ps -aq -f ancestor=yafeya/react-demo)
docker image rm $(docker images --format="{{.ID}}" yafeya/react-demo)

docker build -t yafeya/react-demo .
docker run -d -p 9981:80 --restart always yafeya/react-demo

删除原有编译结果
安装依赖
编译react-demo
停止react-demo的container
删除react-demo的container
删除react-demo的image
build image
run image

执行脚本

# 执行脚本
./docker-exec

React 09 :: Deploy by Nginx

前言

1. 整体结构

2. Dockerfile

3. Nginx配置

4. 编译 & 运行

执行脚本

2. `Dockerfile`

3. `Nginx`配置