如何將前端網站打包成 Docker Image

微信扫一扫,分享到朋友圈

如何將前端網站打包成 Docker Image

以現在開發網站流程,前後端分離已經不稀奇了。前端使用 React.jsVue.js ,後端使用 Golang ,是我現在最長合作的模式。其實後端在開發上面不太需要將前端的開發流程放在自己的電腦上,也就是後端只需要專注開發後端,跟前端的溝通都會是透過 GraphQLSchema 當作討論。目前團隊各自維護專案的部署流程會是最好的方式,前端有兩種方式部署,一種是透過打包方式丟到遠端伺服器,另一種就是打包成 Docker Image,再連線到遠端伺服器更新,兩者都有人使用,本篇會教大家如何將前端網站打包成 Docker Image,用 Image 來部署會是最方便的。

教學影片

如果對於課程內容有興趣,可以參考底下課程。

如果需要搭配購買請直接透過 FB 聯絡我 ,直接匯款(價格再減 100

前端打包

直接看 Reactjs 的 Deployment 章節 ,文件寫的非常清楚,透過簡單的指令就可以將前端網站編譯在 build 目錄內,開發者只要將 build 目錄打包丟上遠端伺服器即可。

npm ci
npm run build:staging

簡單兩個步驟就搞定了,接下來要將 build 目錄放進 Docker Image。

打包 Docker

首先前端的 Dockerfile 相當簡單,只要選 nginx 當做基底,再把相關的 html 檔案複製進去即可

FROM nginx:1.19
LABEL maintainer="Bo-Yi Wu <appleboy.tw@gmail.com>" \
org.label-schema.name="web" \
org.label-schema.vendor="Bo-Yi Wu" \
org.label-schema.schema-version="1.0"
EXPOSE 8080
COPY ./config/nginx/nginx.conf /etc/nginx/conf.d/default.conf
COPY build /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

可以在前端專案建立 docker 目錄,將上述內容存放成 Dockerfile 。大家有無發現多了一行 nginx config 設定

COPY ./config/nginx/nginx.conf /etc/nginx/conf.d/default.conf

這目的是要將所有的 URL Routing 都直接轉給 React 或 Vue 去控管,不然只要重新整理網頁就會看到 404 not found

server {
listen       80;
location / {
root   /usr/share/nginx/html;
index  index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}

透過 try_files 可以解決掉 404 的問題。完成上述步驟後,就可以直接在電腦測試

docker build -t appleboy/app -f docker/Dockerfile.linux.amd64 .

串接部署

這邊就看團隊是用什麼工具部署,底下是 GitHub Action 部署方式,流程都是一樣的,只是用的工具不同,相信會一套,理論上另一種工具也要會

name: CI
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: build web
uses: actions/setup-node@v1
with:
node-version: 12.x
- run: npm ci
- run: npm run build:staging
- name: upload image to ECR
uses: appleboy/docker-ecr-action@v0.0.2
with:
access_key: ${{ secrets.aws_access_key_id }}
secret_key: ${{ secrets.aws_secret_access_key }}
registry: ecr.ap-northeast-1.amazonaws.com
cache_from: ecr.ap-northeast-1.amazonaws.com/frontend
repo: frontend
region: ap-northeast-1
dockerfile: docker/Dockerfile.linux.amd64
- name: pull and restart service
uses: appleboy/ssh-action@master
with:
host: xxx.xxx.xxx.xxx
username: deploy
key: ${{ secrets.ssh_key }}
port: 22
proxy_host: xxx.xxx.xxx.xxx
proxy_username: ubuntu
proxy_port: 443
proxy_key: ${{ secrets.proxy_ssh_key }}
script: |
cd /home/deploy/api/io && aws ecr get-login-password --region ap-northeast-1 | docker login --username AWS --password-stdin ecr.ap-northeast-1.amazonaws.com/frontend
docker-compose pull
docker-compose up -d web

步驟就是

  1. 編譯 build 目錄
  2. 打包 Docker Image 丟到 ECR
  3. 連線到遠端機器更新服務

心得

為了能夠讓網站可以跨不同的雲系統,統一使用 Docker 是最正確的方式,之後想要用 Kubernetes 或是用 docker-compose 都可以無痛轉移,這是趨勢,大家試著將服務都打包成 Docker 吧,方便自己也方便其他開發者。

微信扫一扫,分享到朋友圈

如何將前端網站打包成 Docker Image

马云被印度法院传唤 阿里王帅:找了一天也找不到他

上一篇

哈勃太空望远镜拍到最新的高清晰度土星图像

下一篇

你也可能喜欢

如何將前端網站打包成 Docker Image

长按储存图像,分享给朋友