使用Docker容器化Vue專案 Step1

此篇是使用Docker建立Vue專案的練習，在練習過程中，記錄在部落格裡，反覆思考其原理，熟悉容器化技術在Vue之中。

 

這裡使用版本：

npm, 10.2.0

yarn, 1.22.19

node, 21.1.0

 

建立 Dockerfile,檔案，檔案內容如下：

FROM node:latest as build-stage

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:latest

COPY --from=build-stage /app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

 

建立 default.conf，檔案內容如下：

server {

  listen 80;

  server_name localhost; //這因實際需求自定義

  location / {

    root /usr/share/nginx/html;

    index index.html index.htm;

  }

  error_page 500 502 503 504 /50x.html;

  location = /50x.html {

     root /usr/share/nginx/html;

  }

}

 

 

未完，剩下繼續撰寫研究、測試、更新..