从0到1 使用netlify进行线上部署网站

萱苏jy
1,343 阅读5分钟

大家好 我是萱苏 此部署方法不需要购买服务器和域名 (个人发布小型网址和简历是足够用的)

该部署方法只适合github 不适合gitee

gitee与github好像有一个仓库同步的功能

一.下载github加速软件(可选)

由于 GitHub 网站位于境外，直接访问速度可能受到影响，导致较慢。 为此，您可以选择下载 GitHub 加速软件fastgithub(有时候也慢 但是免费)。地址清华大学云盘

解压双击运行FastGithub.UI.exe

image-20250409114742965.png

二.创建github仓库

在github里面创建一个空的仓库**(注意:要空的 md文档也不要有)**

1.(先运行FastGithub.UI.exe)进入github创建一个空的仓库

image-20250409125520327.png

2.填写仓库名称 英文 最好就只添加一个描述(description) 其他的不要动

image-20250409125932622.png

3.创建成功 会跳转到 另一个界面 (看最下面的栏)

image-20250409130113007.png 4.后续会将复制粘贴命令到终端

三.在项目里面创建git项目

1.在你的项目文件里面初始化仓库 通过git init 进行git的初始化

注意不要弄错目录了

一定要切换到你的项目

image-20250409124912544.png

image-20250409125030745.png

2..通过git add . 将文件放到暂存区 字母U变A 提交成功

image-20250409125126493.png

3..通过 git commit -m "备注/提醒信息" 字母由A变无

image-20250409125321313.png

4.将二步骤的命令复制过来 或者通过git push 你的仓库名 分支(git push origin mian)

image-20250409130242505.png

5.返回git仓库 里面就有了提交的文件 和信息

如果进去是一个文件夹 那么请你删掉项目外面的那个git 在项目里面创建git

image-20250409130328509.png

四.项目上线

进入netilify网站进行部署Scale & Ship Faster with a Composable Web Architecture | Netlify

1.先登录注册(使用github账号登录) image-20250409130630273.png

2.点击第一个 直接在github上导入

image-20250409130910836.png

image-20250409130943598.png

3.点击有导入的仓库

站点名称 :建议英文名称

基目录:默认根目录

构建命令 :项目打包命令

发布目录 :打包后的文件名(注意路径要正确)

然后部署

如果不是vue和react项目,是原生JS, 构建命令,发布目录不要填了

image-20250409131059870.png 4.等待部署成功 点击绿色网站

部署失败的可能:

1.构建命令(npm run dev )和 发布目录(dist)错误

2.github仓库下的根目录下没有找到package.json文件(检查自己的package.json是否在第一层)

3.如果使用了TS 运行tsc -b 查看是否有报错

4.配置过程中的路径地址错误 image-20250409131511871.png 这样就部署成功了点击绿色的网址就可以进行访问

五.netlify线上代理

在netnilify上部署系统 如果遇到跨域问题 就要进行代理 9900f3e79079c68f94222b0b997cb85c.png 修改部署思路(这种部署思路旨在利用 Netlify 的代理功能，将前端应用部署在 Netlify 上，同时将 API 请求和图片资源请求代理到你的后端服务器

1.在你的项目根目录下添加文件netlify.toml

image.png

如何使用netlify服务器进行代理:

 # from: 指定要匹配的 URL 模式。这里匹配所有以 /api/ 开头的 URL。 
  # to: 指定要重定向到的目标 URL。:splat 是一个占位符，用于捕获 from 中 * 匹配的部分。
  # 这里将 /api/* 重定向到 后端数据请求地址/*，并将 * 匹配的部分添加到目标 URL 中。 
  # status: 指定 HTTP 重定向的状态码。200 表示“OK”，但在这里实际上是使用 Netlify 的代理功能，而不是真正的重定向。
  # 这允许 Netlify 代理请求到后端服务器，而不会更改浏览器地址栏中的 URL。
  # force: 指定是否强制执行重定向。设置为 true 表示即使有其他规则匹配，也强制执行此重定向。
[[redirects]]
  from = "/api/*"
  to = "http://后端数据请求地址/:splat"
  status = 200
  force = true

# 同样的规则，用于重定向 /upload/imgs/acc_img/ 下的图片请求。
[[redirects]]
  from = "/upload/imgs/acc_img/*"
  to = "后端数据请求地址/upload/imgs/acc_img/:splat"
  status = 200
  force = true

# 同样的规则，用于重定向 /upload/imgs/goods_img/ 下的图片请求。
[[redirects]]
  from = "/upload/imgs/goods_img/*"
  to = "后端数据请求地址/upload/imgs/goods_img/:splat"
  status = 200
  force = true

2.为了配合 Netlify 的代理配置，您需要修改前端代码中用于发送 API 请求的基础地址（Base URL）。 修改示例：

//修改前
export const baseURL = 'http://1.12.12.12:8080' // 直接指向后端 IP 和端口

//修改后
export const baseURL = '/api' // 修改为 Netlify 代理的路径前缀

eg . 对于登录 就相当于 后端数据请求地址/api/users/checkLogin http://12.12.12.12/api/users/checkLogin

当您将前端的 baseURL 修改为 /api 后，例如对于登录接口 /users/checkLogin，前端实际发起的请求地址将是 /api/users/checkLogin。

这个请求会首先发送到您的 Netlify 站点。Netlify 接收到以 /api/ 开头的请求后，会根据上述代理规则，将其转发（代理）到后端址 http://1.12.12.12:8080，并将 /api/ 后面的路径部分 (:splat，即 users/checkLogin) 附加到目标地址后面。 最终，后端接收到的请求地址将是 http://1.12.12.12:8080/users/checkLogin。

3.完成代码修改后，请将更改提交（Push）到与 Netlify 关联的 GitHub 仓库中。Netlify 会自动检测到 GitHub 仓库的更新，并根据配置触发自动部署流程。部署完成后，前端应用将使用新的 API 请求地址，并通过 Netlify 的代理访问后端服务。

avatar
文章
阅读
粉丝