通过 netlify 部署前端应用

如果自己没有服务器，可以通过 netlify 提供的服务一键免费部署前端应用，自定义二级域名，默认支持 https，相似的应用还有 vercel

通过 cli 部署

安装

使用 netlify 提供的 cli 工具，可以很轻松地在本地部署到远程，更多详细可以查看官方文档

$ npm install netlify-cli -g

配置

我们需要在项目根目录下新建一个 netlify.toml 文件，例如

[build.environment]
  NODE_VERSION = "18" # 指定 node 版本
  NODE_OPTIONS = "--max_old_space_size=4096"

[build]
  publish = "dist"  # 指定发布的目录
  command = "pnpm run build" # 对于当前的项目来说，执行打包任务的命令

[functions]
  node_bundler = "esbuild"

[[redirects]]   # 由于当前项目是 vue-router 的 history 模式，需要配置重定向
  from = "/*"
  to = "/index.html"
  status = 200

部署

直接执行 netlify deploy

选择项目所属的 Team，默认就可以，然后输入 Site-name，这个名字是对于所有用户都是唯一的，尽量取一个不会和其他人重复的名字，这里是 fe-book，将会成为部署后的二级域名。

$ netlify deploy
This folder isn't linked to a site yet
? What would you like to do? +  Create & configure a new site
? Team: peterroe-uovpgxk’s team
? Site name (leave blank for a random name; you can change it later): fe-book

Site Created

Admin URL: https://app.netlify.com/sites/fe-book
URL:       https://fe-book.netlify.app
Site ID:   c1d4bddd-4dfc-49cc-849d-8cc8fb1ccab7

Linked to fe-book

Deploy path:        /Users/linshuheng/Desktop/vscode/i/fe-packing-compiling-book/dist
Configuration path: /Users/linshuheng/Desktop/vscode/i/fe-packing-compiling-book/netlify.toml
Deploying to draft URL...
✔ Finished hashing 
✔ CDN requesting 0 files and 0 functions
✔ Finished uploading 0 assets
✔ Deploy is live!

Build logs:        https://app.netlify.com/sites/fe-book/deploys/64eb00e380904f3b3369200b
Function logs:     https://app.netlify.com/sites/fe-book/functions?scope=deploy:64eb00e380904f3b3369200b
Website draft URL: https://64eb00e380904f3b3369200b--fe-book.netlify.app

If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.
netlify deploy --prod

部署完成之后，会出现一个临时的地址给我们访问，访问确保无误后，部署到生产环境

$ netlify deploy --prod
Deploy path:        /path/to/your/project/dist
Configuration path: /path/to/your/project/netlify.toml
Deploying to main site URL...
✔ Finished hashing 
✔ CDN requesting 0 files and 0 functions
✔ Finished uploading 0 assets
✔ Deploy is live!

Build logs:        https://app.netlify.com/sites/fe-book/deploys/64eb00f913ef6f4198f4b8ad
Function logs:     https://app.netlify.com/sites/fe-book/functions
Unique deploy URL: https://64eb00f913ef6f4198f4b8ad--fe-book.netlify.app
Website URL:       https://fe-book.netlify.app

接下来就可以通过 https://fe-book.netlify.app 访问到这个文档了

绑定 git 仓库部署

不管是 vercel 还是 netlify 都提供了一个功能，就是绑定某个 git 仓库部署项目，一旦仓库的主分支发生变化，就会触发项目的自动部署

在 https://app.netlify.com 登陆后，找到 Add new site -> Import an existing project，就可以绑定自己的 GitHub 仓库项目了。

然后再配置 Build settings，就是项目的一些打包命令，要发布的静态文件目录，如有必要，需要手动修改成适配自己项目的命令。

除此之外，上面用 CLI 部署的项目，也可以选择绑定一个仓库，完成从临时方案到稳定方案到过度。路径是 site configuration -> Build & deploy -> Link repository

通过 netlify 部署前端应用 ​

通过 cli 部署 ​

安装 ​

登录 ​

配置 ​

部署 ​

绑定 git 仓库部署 ​

通过 netlify 部署前端应用

通过 cli 部署

安装

登录

配置

部署

绑定 git 仓库部署