1088 字
5 分钟
前端

生命周期#

package.json就像project.toml一样,他的sricpts块,我还以为就是注册pnpm,npm的命令,但是他有些固定的命令名是特殊的比如preinstallprebuild,比如:“preinstall”: “npx only-allow pnpm”,这就是在install库之前检查使用的包管理器,只能使用pnpm。

环境变量约定#

在python一般会用dotenv,在这里想要写环境变量,用vite构建的项目可以把环境变量放在

  • .env 全局变量
  • .env.development pnpm dev时注入的变量
  • .env.production pnpm build时注入的变量 用一下方式导入环境变量,记得加上PUBLIC,没有PUBLIC默认不会让你导入的
const API_BASE = import.meta.env.PUBLIC_API_BASE;

astro的包内置了vite。 如果部署在clouflare page、github action来build的话,记得在上面另外配个生产的环境变量。

开发服务器约定#

astro dev默认绑定localhost域名上的,防止网络安全的问题,但是有点多余了,我还不知道安不安全吗,—host可以让他和正常项目一样不绑定域名,觉得不安全用ufw

CI(Continuous Integration)#

持续集成

代码质量控制(lint)#

就像python的ruff,biome就是js里的ruff。每次在提交前先biome check一下,他会格式化缩进,导报顺序,变量声明的顺序。他不会变代码逻辑的,大方用,不放心的话,git diff一个个文件看看核对一下。

Terminal window
#格式化顺便检查语法逻辑,write参数会直接修改格式化代码
biome check [--write] ./src
#只格式化
biome format [--write] ./src
#最严格,只读不写,一有问题就错误返回
biome ci ./src

检测代码逻辑(check)#

biome规范化代码之后,astro项目可以使用astro check来检查有没有报错。

workflow#

一个脚本,只不过是监控仓库状态触发的。会花你github账号action的时长,公有仓库免费

name: CI(Continuous Integration)
on: #在push或pr的时候执行此workflow
push:
branches: [ main ]
pull_request:
branches: [ main ]
env:
PUBLIC_API_BASE: ${{ secrets.PUBLIC_API_BASE }} #读生产环境的api地址
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true
permissions:
contents: read
jobs: #每个job都是一个全新的虚拟机
lint: #检查代码质量
runs-on: ubuntu-latest #跑在github的虚拟机runner上
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Biome
uses: biomejs/setup-biome@v2
with:
version: latest
- name: Run Biome
run: biome ci ./src --reporter=github
check-and-build: #检查代码逻辑漏洞,防止bug扩散到生产服务器上
needs: lint # 等lint过了再检查
runs-on: ubuntu-latest
steps:
- name: Checkout Source Code
uses: actions/checkout@v4
- name: Setup pnpm
uses: pnpm/action-setup@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 22
cache: 'pnpm'
- name: Install Dependencies
run: pnpm install --frozen-lockfile
- name: Type Check
run: pnpm astro check
- name: Production Build
run: pnpm astro build
- name: Upload Build Artifacts #把这个job构建出来的东西存在github上,让CD的时候取。
uses: actions/upload-artifact@v4
with:
name: dist # 产物的名字(下载时要用同样的名字)
path: dist/

CD(Continuous Deployment)#

持续部署

name: CD(Continuous Deployment)
on:
workflow_run: #在CI成功之后运行
workflows: ["CI(Continuous Integration)"] #之后取dist/都是通过这个workflow名
types: [completed]
permissions:
actions: read # 允许下载其他 workflow 的产物
contents: read
jobs:
deploy:
runs-on: ubuntu-latest
if: ${{ github.event.workflow_run.conclusion == 'success' }}
steps: # 下载bulid完的产物
- name: Download Build Artifacts
uses: actions/download-artifact@v4
with:
name: dist
run-id: ${{ github.event.workflow_run.id }}
github-token: ${{ secrets.GITHUB_TOKEN }}
path: ./dist # 下载到当前目录下的 dist 文件夹
- name: Setup SSH
run: |
mkdir -p ~/.ssh
# 把 GitHub Secret 中的私钥写进文件
echo "${{ secrets.DEPLOY_SERVER_SSH_KEY }}" > ~/.ssh/id_ed25519
# 设置严格的权限 (SSH 协议强制要求)
chmod 600 ~/.ssh/id_ed25519
# 忽略主机指纹检查
echo "StrictHostKeyChecking no" >> ~/.ssh/config
- name: Deploy with rsync
run: |
rsync -avz --delete -e "ssh -i ~/.ssh/id_ed25519" ./dist/ github-action@cannian.space:/var/www/cannian/
#--delete代表每次传上去都把现在没有的,但是前面有的都给删了,确保构建的文件是完全相同的,/dist/代表把dist里的所有的都放到目标文件夹里,不包括dist文件夹

包管理#

npm#

nodejs原生的包管理工具

npx#

下载过来的库即用即删。

pnpm#

用这个包管理,他会把已经装过的模块整体缓存起来哪个项目要用就硬链接到他的node_moudles里。

Terminal window
#添加新的依赖
pnpm add
#相当于uv sync
pnpm install

别的去看文档把。

常用的库#

前端
https://blog.cannian.space/posts/2026-3-15-fuwari/
作者
Cannian
发布于
2026-03-15
许可协议
CC BY-NC-SA 4.0