Docker 部署React项目笔记

因为公司的业务需要，所以自学了一段时间的react,现在可以独立写一些简单的页面了，但是在部署的时候又遇到了难题。通过查找资料记录一下打包成Docker镜像和部署的过程，其实打包不打包都没有问题，主要是配置好nginx即可。

项目情况

• 使用create-react-app脚手架
• 使用react-route-dom@5路由
• 使用nginx

实际操作

打包react项目

执行命令yarn build进行打包，打包后项目的目录build下多出打包文件。

Nginx相关

创建nginx.conf文件，配置如下。如果是不打算用Docker部署，那直接修改Nginx的配置文件也可以

user  root;
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;
    underscores_in_headers on;
    client_max_body_size   20m;

    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 default_server;
        server_name _;

        location  / {
          root /usr/share/nginx/html;
          index  index.html ;
          try_files $uri $uri/ /index.html;
        }
    }
}

创建Docker镜像

在react根目录创建Dockerfile文件，并写入如下内容。

FROM nginx:latest 
LABEL maintainer "endpain" 
ADD ./build /usr/share/nginx/html/ 
ADD nginx.conf /etc/nginx/ 
EXPOSE 80

然后打包Docker镜像docker build -t endpain/testreact .

开始运行查看吧

直接执行docker run -d -p 80:80 endpain/testreact 在浏览器输入localhost就可以查看到了。