前言

通常前端的過程跟後端差不多，都是包裝成一個 Container 部署到 GKE 或者 Cloud Run

這邊分享一下思路，大致上就是將前端程式碼編譯打包後，掛載到網頁服務器上，然後包裝成 Image 部署上去。

這邊提供一個 Next.js 的範本供大家參考！

ARG NODE_VERSION=lts

FROM node:${NODE_VERSION}-alpine AS build

ENV ANALYZE=false

WORKDIR /app

#  add libraries; sudo so non-root user added downstream can get sudo
RUN apk add --no-cache \
    sudo \
    curl \
    build-base \
    g++ \
    libpng \
    libpng-dev \
    jpeg-dev \
    pango-dev \
    cairo-dev \
    giflib-dev \
    python \
    ;

#  add glibc and install canvas
RUN apk --no-cache add ca-certificates wget  && \
    wget -q -O /etc/apk/keys/sgerrand.rsa.pub https://alpine-pkgs.sgerrand.com/sgerrand.rsa.pub && \
    wget https://github.com/sgerrand/alpine-pkg-glibc/releases/download/2.29-r0/glibc-2.29-r0.apk && \
    apk add glibc-2.29-r0.apk

COPY . .
RUN rm -rf node_modules
ENV NPM_CONFIG_LOGLEVEL warn
RUN yarn install --frozen-lockfile && yarn build && rm -rf .next/cache

ENTRYPOINT [ "yarn" ]
CMD ["start:server"]

其中我們是使用 node Image 作為基底，加入相關依賴後，再透過 Next.js 框架功能執行！

因為是容器的關係，所以 Cloud Build 的設定檔其實一樣，如此一來就完成了前端的自動化！