Nuxt

Nuxt 是一个集成了前后端的框架，对于一些小型网站，不需要前后端分离的，是个好的选择

比如最近就做了一个 me.imba97.cn，准备放一些关于我的一些东西

Docker

因为涉及到后端，需要 Node 环境，借助 GPT 简单写了个 Dockerfile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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 是以下命令

1
nuxt start --hostname 0.0.0.0 --port $NUXT_PORT

Github Actions

配置了 Github Actions 自动打包镜像并发布

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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

部署脚本

我是部署在家里路由器上的，为了方便又简单写了个脚本

1
2
3
4
5
6
7
8
#!/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