Nuxt

Nuxt 是一個集成了前後端的框架，對於一些小型網站，不需要前後端分離的，是個好的選擇

比如最近就做了一個 me.imba97.cn，準備放一些關於我的一些東西

預覽

大概長這樣

Docker

除了這個簡歷，我把之前的《寫了個簡單的頁面，分享此時此刻在聽的歌》也遷過去了

你可以訪問 me.imba97.cn/playing 查看

之前接口是用的 PHP，因為涉及到後端，需要 Node 環境，藉助 GPT 簡單寫了個 Dockerfile

FROM node:18

# 創建並設置工作目錄
WORKDIR /usr/src/app

# 複製所有源代碼到工作目錄
COPY . .

# 安裝 pnpm
RUN npm install -g pnpm

# 安裝項目依賴
RUN pnpm install

# 構建 Nuxt
RUN pnpm run build

# 暴露端口（默認端口為 3000，可以通過環境變量 NUXT_PORT 配置）
ENV NUXT_PORT=3000
EXPOSE ${NUXT_PORT}

# 啓動 Nuxt.js 應用程序
CMD [ "pnpm", "start-docker" ]

start-docker 是以下命令

nuxt start --hostname 0.0.0.0 --port $NUXT_PORT

Github Actions

配置了 Github Actions 自動打包鏡像併發布

name: Build and Push Docker Image

on:
  push:
    tags:
      - 'v*'

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm install

      - name: Build the project
        run: npm run build

      - name: Log in to Docker Hub
        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}

      - name: Build and tag Docker image
        run: |
          TAG_NAME=$(echo $GITHUB_REF | sed 's/refs\/tags\///')
          docker build . -t ${{ secrets.DOCKER_USERNAME }}/me:latest
          docker tag ${{ secrets.DOCKER_USERNAME }}/me:latest ${{ secrets.DOCKER_USERNAME }}/me:$TAG_NAME

      - name: Push Docker image to Docker Hub
        run: |
          TAG_NAME=$(echo $GITHUB_REF | sed 's/refs\/tags\///')
          docker push ${{ secrets.DOCKER_USERNAME }}/me:latest
          docker push ${{ secrets.DOCKER_USERNAME }}/me:$TAG_NAME

部署腳本

我是部署在家裏路由器上的，為了方便又簡單寫了個腳本

#!/bin/sh

docker stop imba97-me
docker rm imba97-me

docker pull imba97/me:latest

docker run -d --name imba97-me -p 3000:3000 --restart always imba97/me:latest

其他

雖然之前看到過有自動更新容器的方法，不過目前先這樣了

Nuxt Docker 鏡像倒是也有不少，但還是自己搞一個單獨的了

開源

有興趣可以看一下 imba97/me