接触 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
配置了自动打包 Docker 镜像并发布
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
开源
有兴趣可以看一下 Github: imba97/me
其他
虽然之前看到过有自动更新容器的方法，不过目前先这样了
Nuxt Docker 镜像倒是也有不少，但还是想自己搞一个单独的
我目前在积极寻找远程全职工作，有兴趣可以联系我，谢谢
