專案結構如下：
常理來說要透過Nginx部屬，通常配置如下：
server {
listen 80;
listen [::]:80;
root /usr/share/nginx/html;
index index.html;
server_name _;
access_log /var/log/default_access_log;
error_log /var/log/default_error_log;
location / {
try_files $uri $uri/ /index.html?$args;
}
# Cache file
location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
root /usr/share/nginx/html;
expires 12h;
add_header Pragma public;
add_header Cache-Control "public, max-age=31536000";
}
}
接著再專案內新增Dockerfile，格式如下：
FROM node:18 as NODE
WORKDIR /vue
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:latest
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=NODE /vue/dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]為什麼要用nginx -g daemon off，是因為Docker 容器的主要任務是運行一個進程，並且容器的生命週期與該進程的生命週期緊密相關。如果在容器中以守護進程模式運行 Nginx（不使用前台模式），則容器將在 Nginx 進程啟動後立即退出，因為 Docker 認為該進程已經完成，容器的任務也就結束了。這不符合我們在容器中運行 Nginx 的期望。
所以CMD這個命令的目的是讓 Nginx 進程以前台模式（foreground mode）運行，而不是以守護進程（daemon）的方式運行。
接著透過下方命令建立Image及將Image部屬Container
# 建立Image
# docker build -t Image名稱:版本號 dockerFile路徑
docker build -t vue:v1 .
# Image部屬Container
# docker run --name Container名字 -p 宿主的Port:Container的Port -d Image名稱:Image版本號
docker run --name myVue -p 8080:80 -d vue:v1
