Docker部署React项目

1. 创建配置文件

1.1 创建Dockerfile(项目根目录)

# Dockerfile

# 第一阶段: 构建node容器镜像
FROM node:12.18 # 基础镜像node
COPY ./ /app-source # 复制项目文件到镜像内的目标位置/app-source
WORKDIR /app-source # 指定工作目录
RUN npm install && npm run build:test # 安装依赖 && 打包

# 第二阶段: 构建nginx容器镜像
FROM nginx:1.18 # 设置基础镜像nginx
RUN mkdir /app # 创建目录
COPY --from=0 /app/build /app # 将第一阶段镜像打包后的文件复制到nginx镜像的指定目录
  # --from=0 引用第一阶段镜像
COPY nginx.conf /etc/nginx/nginx.conf # 复制配置文件到nginx镜像的指定目录

1.2 创建.dockerignore(项目根目录)

• 防止 node_modules 和其他中间构建产物被复制到镜像中导致构建问题

**/node_modules
**/build

1.3 创建nginx.conf(项目根目录)

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
  server {
    listen       80; # 端口号
    location / {
      root   /app; # 站点目录
      index  index.html; # 默认首页
      try_files $uri $uri/ /index.html; # 兼容history路由
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}

2. 构建Docker镜像

# 进入主机
$ git clone ${项目地址} # 克隆工程目录
$ cd /app # 进入项目目录
$ docker build . -t app-image # 构建Docker镜像

3. 运行Docker镜像

$ docker run -d -p 8080:80 app-image # 通过镜像启动容器: 映射本机端口号8080-容器内端口90
$ curl localhost:8080 # 测试是否部署成功
# 通过8080端口访问当前主机