使用 Docker 部署 vue 專案

common way publicPath:'/'

nginx.conf

#user nobody;

worker_processes 2;

events {
    worker_connections 1024;
}

http {
include mime.types;
default_type application/octet-stream;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
gzip on;
gzip_static on;
gzip_min_length 1024;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;

gzip_vary off;

gzip_disable "MSIE [1-6]\.";

server {
    listen 80;
    charset utf-8;

    location / {
        root /usr/src/app;
        index index.html index.htm;
        try_files $uri $uri/ @rewrites;
    }

    location ~ /api {
        # proxy_pass ....;
    }

    location @rewrites {
        rewrite ^(.*)$ /index.html last;
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root html;
        }
    }
}

Dockerfile

FROM nginx:1.17.3-alpine
COPY nginx.conf /etc/nginx
COPY /dist /usr/src/app
EXPOSE 80

vue.config.js

module.exports  =  {
    publicPath:'/',
}

subfolder way publicPath:'/'

tips (vue-router mode can not be history)

vue.config.js

module.exports  =  {
    publicPath:'/my-app/',
}

Dockerfile

FROM nginx:1.17.3-alpine
COPY nginx.conf /etc/nginx
COPY /dist /usr/src/app
EXPOSE 80

nginx.conf

• nginx.conf (parent)

location ~ ^/my-app/ {
    rewrite ^/my-app/(.*)$ /$1 break;
    proxy_pass http://localhost:8080;
}

• nginx.conf (docker inner)

location / {
    root /usr/src/app;
    index index.html index.htm;
    try_files $uri $uri/ @rewrites;
}

docker nginx conf merge error

location ~ /api {
    rewrite ^/api/(.*)$ /$1 break;
    proxy_pass ...;
}

then you can run follow cmd

• pack

   yarn build
   docker build -t username/image-name:tag .
   # ex docker build -t guygubaby/vue-app:latest .
   docker push username/image-name:tag

• run

  docker pull username/image-name:tag
  docker run -d --rm -p 8080:80 username/image-name:tag

第一次寫部落格，嚶嚶嚶

本作品採用《CC 協議》，轉載必須註明作者和本文連結