nuxt

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

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

预览

大概长这样

docker

之前接口是用的 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