1088 字
5 分钟
前端
生命周期
package.json就像project.toml一样,他的sricpts块,我还以为就是注册pnpm,npm的命令,但是他有些固定的命令名是特殊的比如preinstall和prebuild,比如:“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一个个文件看看核对一下。
#格式化顺便检查语法逻辑,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里。
#添加新的依赖pnpm add#相当于uv syncpnpm install别的去看文档把。
常用的库
- astro:前端框架
- tailwindcss
- bitsui:无头svelte组件
- axios:发http请求
- svelte:前端框架
- server
的服务器库 - biome:格式化代码
- svelte-sonner
的toast组件