如何使用Docker構建前端專案

herryLo發表於2022-05-09
Docker前端

原文連結
Docker單獨部署前端專案和Node專案是非常便捷的，在這裡分享一下Docker的使用，主要聊聊它的部署實踐。（我是window10專業版安裝Docker）

Docker

Docker是一種應用容器引擎技術，類似於虛擬機器，不過它的實用性、通用性、便捷性更強，Docker容器可以說就是VM，不過佔用資源更少，更輕量，通過作業系統級虛擬化方法，利用更加節省的硬體資源提供給使用者更多的計算資源。

Docker容器是Linux 容器的一種封裝，由於容器存在獨立的執行環境，Docker可以將應用程式和依賴打包容器中，啟動容器即可執行程式。

Docker部署

Docker容器配合 GitHub Action、Jenkins、Rancher使用非常的便捷，當然這裡說到的是Docker個人部署實踐，下面主要說到的是通用前端專案部署方案。

配置nginx

在前端根目錄建立 nginx.conf（與package.json同級），具體配置如下，可以根據實際專案調整修改:

server {
    listen 80 default_server;
    server_name _;
    
    location / {
      root   /usr/share/nginx/html/web;
      index  index.html index.htm;
      try_files $uri $uri/ /index.html;
    }
    
    # 介面代理示例
    # location /api {
    #     proxy_pass http://xxx.com;
    #     proxy_set_header Host $host:$server_port;
    #     proxy_set_header X-Real-IP $remote_addr;
    #     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    #     proxy_set_header Cookie $http_cookie;
    #     proxy_buffering off;
    #     proxy_cache off;
    # }
  }

nginx配置的主要的作用是靜態資源代理，同時介面轉發。以上的配置是直接再本機執行，如果要在伺服器上執行，可以將其中的配置改為:

listen 80;
server_name xxx.com;

配置Dockerfile

在根目錄建立Dockerfile檔案(與package.json同級)

FROM node:latest
COPY package.json /
RUN npm i --registry=https://registry.npm.taobao.org
RUN npm run build

FROM nginx:latest
# 這裡的dist/目錄是你的專案打包後的檔案目錄
COPY ./dist/ /usr/share/nginx/html/
COPY ./nginx.conf /etc/nginx/conf.d/

EXPOSE 80

上面的配置檔案非常的簡單，主要就是將構建打包，之後安裝nginx，複製nginx配置檔案，複製打包後的檔案，開放80埠。

Docker映象部署

將專案更新到伺服器上，在伺服器執行Docker構建命令（ 當然也可以再本地構建）：

Docker build -t docker/web:v1.0 .

docker/web:v1.0 是映象名稱,特別注意後頁面那個點不能省略。

啟動容器

docker run -d -p 8080:80 docker/web:v1.0

docker/web:v1.0 是構建映象時設定的名稱，8080:80代表將nginx的80對映到你伺服器的8080埠(注意你伺服器的埠是否開放8080，其他埠也可以；如果是本地訪問，不用考慮這個)。

映象啟動成功後，瀏覽器輸入localhost:8080即可訪問了。

相關文章