# 【Vue3+Vite】專案使用Docker Nginx部屬前端站台

## 1.利用vite打包

在利用vue3+vite建置專案時，可以到`package.json`的`script`內加上利用vite的打包功能的指令，`"build:dev": "vite build --mode development"`。

至於`--mode` 後面帶的 development 是指會去讀取我設定的`.env.development`檔案，裡面帶了在測試環境需要的設定檔。

我的`.env.development`內容如下：

NODE_ENV=development
VITE_APP_TITLE=我的VUE前端網頁
VITE_APP_BASE_API=http://localhost:7778/myVeu/api
TEMPLATE=./public/index-dev.html

之後就可以使用yarn build:dev打包專案至根目錄之`dist`資料夾。

正確打包後資料夾結構大概長這樣

## 2.撰寫nginx.conf

在專案跟目錄底下建立一個`nginx.conf`檔案

server {
    #服務部屬上Container用的是哪個Port
    listen       7777;
    server_name  localhost;

    client_max_body_size        100m;
    client_body_buffer_size     128k;
    proxy_connect_timeout       5;
    proxy_send_timeout          1800;
    proxy_read_timeout          1800;
    proxy_buffer_size           4k;
    proxy_buffers               4 32k;
    proxy_busy_buffers_size     64k;
    proxy_temp_file_write_size  64k;
    auth_basic "status";
    #開啟gzip
    gzip  on;
    #低於1kb的資源不壓縮
    gzip_min_length 1k;
    #壓縮級別1-9，越大壓縮率越高，同時消耗cpu資源也越多，建議設置在5左右。
    gzip_comp_level 5;
    #需要壓縮哪些response類型的資源，用空格隔開。不建議壓縮圖片.
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
    #配置禁用gzip條件，支持正規表達式。此處表示ie6及以下不啟用gzip
    gzip_disable "MSIE [1-6]\.";
    #是否添加"Vary: Accept-Encoding" response header
    gzip_vary on;

    #location / 是指當從外部訪問這個服務的時候，他需要帶什麼路徑 (這邊寫是localhost:7777/)
    #如果希望是訪問的網址是 localhost:7777/myWeb 就寫成location /myWeb
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;  #VUE，配置路由（必須）
    }

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

## 3.撰寫Dockerfile

第1行表示要利用 nginx 這個 docker image 來搭建。
第2行是指定 VITE_ENV 是用 development 這個環境變數。
第4行是將打包好的專案複製進 nginx docker image 內的`/usr/share/nginx/html`資料夾。
第5行是將我們寫好的`nginx.conf`設定檔，複製進這個 docker image 設定檔放置的路徑(覆蓋掉預設的設定檔)。
第7行是設定服務port號

FROM nginx
ENV VITE_ENV=development

COPY ./dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 7777

## 包成docker image並執行

`docker build -t myVueWeb_20230821 .`

建立 Container 使用 [ip]:[hostPort]:[containerPort] 格式指定使用`myVueWeb_20230821`這個 image 建立名為 `myVueWeb` 的 container

 docker run -it -d -p 10.20.241.48:7777:7777 --name myVueWeb myVueWeb_20230821

若以上步驟都正確，就可以至`localhost:7777/`看到服務了。