使用Docker 发布react 等单页面项目

1. 安装 docker

点击以下链接下载 Stable 或 Edge 版本的 Docker for Mac [https://download.docker.com/mac/stable/Docker.dmg]

2. 使用Portainer管理Docker

https://www.cnblogs.com/q1104460935/p/10637482.html

docker pull portainer/portainer && docker run -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock portainer/portainer

3. React打包网站（https://zhuanlan.zhihu.com/p/39241059）

npm run build

4. 修改 参数 配置

1. 在项目根目录添加添加nginx.conf 配置文件，便于 dock 中进行使用，具体 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;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;
    server {
        listen 80 default_server;
        server_name _;

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

        # location  ~ /api/  {
        #   proxy_connect_timeout 2s;
        #   proxy_read_timeout 600s;
        #   proxy_send_timeout 600s;
        #   proxy_pass http://gateway:8080;
        #   proxy_set_header        Host    $host:80;
        #   proxy_set_header        X-Real-IP       $remote_addr;
        #   proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        #   client_max_body_size    1000m;
        # }
    }
}

2\. 新建Dockerfile 文件添加配置 

FROM nginx:latest 
LABEL maintainer "mhh@yuntsoft.com" 
ADD dist/ /usr/share/nginx/html/ 
ADD nginx.conf /etc/nginx/ 
EXPOSE 80

5. 构建dock 镜像 并 进行运行镜像

docker build -t yuntsoft/softmanage .
docker run -d -p 9001:80 yuntsoft/softmanage

6. 在 react 中可以使用以下命令进行网站打包、镜像打包与镜像推送

npm run build && docker build -t yuntsoft/softmanage . && docker run -d --name soft_v1.0 -p 9002:80 yuntsoft/softmanage

7. docker 容器相关 操作及资料
Docker stop停止/remove删除所有容器
吴佳伟博客说明<常规的监控及相关操作>
参考资料:

[Docker — 从入门到实践](https://yeasy.gitbooks.io/docker_practice/)(https://yeasy.gitbooks.io/docker_practice/)