背景简介
使用 Docker 部署 React app。
环境信息
- Docker 已安装 【Docker - Debian 安装】
示例需求
- 生成 React 部署资源
- 创建 Doker 容器
- 使用 Docker 部署
详细步骤
第一步： 生成 React 部署资源
- 在项目路径下执行如下指令
$ npm run build
> react-app-demo@0.1.0 build
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
59.01 kB build/static/js/main.23b597da.js
1.78 kB build/static/js/453.69e8bcfe.chunk.js
513 B build/static/css/main.f855e6bc.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
https://cra.link/deployment
第二步： 创建 Docker 容器
- 创建
react-app-demo.conf配置文件
server {
listen 80;
# 使用环境变量来设置server_name
server_name ${SERVER_NAME};
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri /index.html;
}
}
- 创建
Dockerfile配置文件
# 使用官方Nginx基础镜像
FROM nginx:latest
# 删除Nginx的默认配置文件
RUN rm /etc/nginx/conf.d/default.conf
# 复制自定义Nginx配置文件到容器中
COPY react-app-demo.conf /etc/nginx/conf.d/
# 复制React应用的静态文件到Nginx服务器的默认目录
COPY build /usr/share/nginx/html
# 暴露80端口
EXPOSE 80
第三步： 构建 Docker 容器
$ sudo docker build -t react-app-demo:1.0.0 .
[+] Building 1.7s (9/9) FINISHED docker:default
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 485B 0.0s
=> [internal] load metadata for docker.io/library/nginx:latest 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> CACHED [1/4] FROM docker.io/library/nginx:latest 0.0s
=> [internal] load build context 0.1s
=> => transferring context: 3.34kB 0.0s
=> [2/4] RUN rm /etc/nginx/conf.d/default.conf 0.6s
=> [3/4] COPY react-app-demo.conf /etc/nginx/conf.d/ 0.3s
=> [4/4] COPY build /usr/share/nginx/html 0.2s
=> exporting to image 0.2s
=> => exporting layers 0.2s
=> => writing image sha256:3a6324b3cc388d6a2bff283c786632401837ab373263f23d62ede32267ae4d1f 0.0s
=> => naming to docker.io/library/react-app-demo:1.0.0
**第四步：**启动容器
- 后台启动
$ sudo docker run -d -p 8080:80 --name react-app-demo -e SERVER_NAME=react-app-demo react-app-demo:1.0.0
b34a7534b0f89d8f4f36014221c85333245bfb778b0900306b3dc414543958c3
- 查看容器状态
$ sudo docker container ls -a
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
b34a7534b0f8 react-app-demo:1.0.0 "/docker-entrypoint.…" 50 seconds ago Up 50 seconds 0.0.0.0:8080->80/tcp, [::]:8080->80/tcp react-app-demo
第五步： 登录项目首页查看部署结果
备注： 可根据自身需求将 server name 添加至本机hosts
$ cat /etc/hosts
127.0.0.1 localhost react-app-demo
以上便是本文的全部内容，感谢您的阅读，如遇到任何问题，欢迎在评论区留言讨论。