用 Nuxt 写了个简历并做了自动化

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

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值