Docker + nginx 部署前端项目--记录

背景: 公司的项目前后端完全分离，所以前端需要独立部署

1、项目结构

      

项目打包后的静态资源在 dist 目录下

2、两个关键的文件 Dockerfile 和 nginx.conf

Dockerfile 放在根目录下

Dockerfile内容如下：

FROM nginx:stable-alpine
COPY dist/ /usr/share/nginx/html/
RUN rm /etc/nginx/conf.d/default.conf
COPY deploy/nginx.conf /etc/nginx/conf.d/default.conf
CMD ["nginx", "-g", "daemon off;"]

nginx.conf 放在 deploy/ 下，通过配置代理，可以将http请求代理到后端服务的地址

server {
    listen       8088;
    server_name  localhost;
    client_max_body_size 20g;
    keepalive_timeout 6000s;
    fastcgi_connect_timeout 6000;
    fastcgi_send_timeout 6000;
    fastcgi_read_timeout 6000;

    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    location /nginx/ {
        proxy_set_header Host $host;
        proxy_set_header  X-Real-IP        $remote_addr;
        proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://xxxx:8080/; #后面带斜杠 会把匹配到的 /nginx/ 去掉
    }
     location /kapis/ {
        proxy_set_header Host $host;
        proxy_set_header  X-Real-IP        $remote_addr;
        proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://xxxx:8889/; #后面带斜杠 会把匹配到的 /nginx/ 去掉
     }
     location /apis {
         proxy_set_header Host $host;
         proxy_set_header  X-Real-IP        $remote_addr;
         proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
         proxy_set_header X-NginX-Proxy true;
         proxy_pass http://xxxx:8889;
     }
     location /oss/file/upload {
            proxy_connect_timeout 6000s;
            proxy_send_timeout 6000s;
            proxy_read_timeout 6000s;
            proxy_method POST;  #上传文件等操作静态资源的请求需要加这个
            proxy_pass http://xxxx:8080;
     }
   
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

        Dockerfile 中 有一处需要与 nginx.conf 对应

        

 

 

3、部署步骤

        （1）项目打包好之后，将整个项目上传到服务器；(我是直接在服务器通过 git 拉取);

           (2) 进入到项目目录，通过 docker 生成镜像 

docker build -f Dockerfile -t 你的镜像名xxx .

               (3) 运行docker

docker run -d -p 8088:8088 你的镜像名

          （4） 访问8088端口