跳到主要内容

静态网页托管服务

前端网站文件部署方式？​

image-20240606065257917

前端网站的文件部署方式主要有以下几种，选择适合自己的方式，取决于项目规模、技术栈以及团队的偏好。

目录​

[toc]

1. 静态网站托管服务​

GitHub Pages​

GitHub Pages 是 GitHub 提供的免费静态网站托管服务，非常适合小型项目、个人博客或项目文档。

  • 步骤：
    1. 将项目代码推送到 GitHub 仓库。
    2. 在仓库设置中启用 GitHub Pages，选择分支和文件夹（通常是 main 分支下的 /docs 或 / 目录）。
  • 优点：简单免费、支持自定义域名、与 GitHub 无缝集成。

Netlify🎉​

自动化部署：ci-cd；

Netlify 是一个强大的静态网站托管平台，支持自动化部署、CDN 加速和 SSL 证书等功能。

  • 步骤：

    1. 注册并登录 Netlify。
    2. 将你的 Git 仓库连接到 Netlify。
    3. 配置构建命令和发布目录（例如，对于 React 项目通常是 npm run build，发布目录是 build）。
    4. 部署并设置自定义域名（可选）。

  • 优点：自动化部署、强大的 CDN、支持 Serverless Functions。

Vercel🎉​

Vercel 特别适合 Next.js 项目，但也支持其他框架和静态网站。

  • 步骤：

    1. 注册并登录 Vercel。
    2. 将你的 Git 仓库连接到 Vercel。
    3. 配置构建命令和发布目录。
    4. 部署并设置自定义域名（可选）。

  • 优点：对 Next.js 和 React 支持极好、自动化部署、CDN 加速。

2. 云服务​

一般例如阿里云等oss能提供静态站点托管服务。

AWS S3 + CloudFront​

适合需要高可用性和可扩展性的项目。

  • 步骤：

    1. 创建一个 S3 Bucket 并将静态网站文件上传到 Bucket。
    2. 配置 Bucket 为静态网站托管。
    3. 配置 CloudFront 分发内容以加速全球访问。
    4. 配置 Route 53 进行 DNS 管理（可选）。

  • 优点：高度可扩展、全球 CDN 加速、与其他 AWS 服务集成。

Azure Static Web Apps​

Azure 提供了专门的静态网站托管服务。

  • 步骤：

    1. 创建一个 Azure Static Web Apps 资源。
    2. 将你的 Git 仓库连接到 Azure。
    3. 配置构建和发布设置。
    4. 部署并设置自定义域名（可选）。

  • 优点：与 Azure 生态系统集成、自动化部署、支持 Serverless。

Google Cloud Storage + Cloud CDN​

适合需要 Google Cloud 生态系统支持的项目。

  • 步骤：

    1. 创建一个 Google Cloud Storage Bucket 并上传静态文件。
    2. 配置 Bucket 为公共访问。
    3. 配置 Cloud CDN 加速内容分发。
    4. 配置 Cloud DNS 进行 DNS 管理（可选）。

  • 优点：全球 CDN 加速、与 Google Cloud 服务集成。

3. 自建服务器​

使用 Nginx 或 Apache​

源码部署在服务器上。

适合需要自定义服务器配置或已有服务器资源的项目。

  • 步骤：

    1. 将静态网站文件上传到服务器。
    2. 配置 Nginx 或 Apache 服务器以托管文件。
    3. 设置域名和 SSL 证书（可选）。

  • 优点：高度可定制、完全控制服务器环境。

使用 Docker🎉​

使用 Docker 容器来部署静态网站，适合需要隔离环境和一致性部署的项目。

  • 步骤：

    1. 创建一个 Dockerfile，定义静态网站文件和 Nginx 配置。
    2. 构建 Docker 镜像并运行容器。
    3. 将容器部署到服务器或云平台。

  • 优点：环境一致性、易于扩展和配置、便于 CI/CD 集成。

4. 边缘网络（Edge Networks）​

Cloudflare Pages​

Cloudflare Pages 是 Cloudflare 提供的静态网站托管服务，具有边缘网络加速功能。

  • 步骤：

    1. 注册并登录 Cloudflare。
    2. 创建一个 Cloudflare Pages 项目并连接你的 Git 仓库。
    3. 配置构建设置和发布目录。
    4. 部署并设置自定义域名（可选）。

  • 优点：全球 CDN 加速、边缘计算支持、与 Cloudflare 生态系统集成。

总结​

根据你的需求和项目特点选择合适的部署方式。对于小型项目或个人博客，GitHub Pages 和 Netlify 是不错的选择；

对于企业级应用，AWS S3 + CloudFront 和 Azure Static Web Apps 提供了更高的可扩展性和灵活性；

Docker 和自建服务器适合有特定需求或已有服务器资源的项目。

关于我​

我的博客主旨：

  • 排版美观，语言精炼；
  • 文档即手册，步骤明细，拒绝埋坑，提供源码；
  • 本人实战文档都是亲测成功的，各位小伙伴在实际操作过程中如有什么疑问，可随时联系本人帮您解决问题，让我们一起进步！

🍀 微信二维码

x2675263825 （舍得）， qq：2675263825。

image-20230107215114763

🍀 微信公众号

《云原生架构师实战》

image-20230107215126971

🍀 个人主页：

https://onedayxyy.cn

image-20240604060532928

🍀 知识库：

https://onedayxyy.cn/docusaurus/

image-20240602215648594

🍀 博客：

http://47.100.215.163:8090/

image-20240602215637124

image-20240602215720712

🍀 csdn

https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421

image-20230107215149885

🍀 知乎

https://www.zhihu.com/people/foryouone

image-20230107215203185

最后​

好了，关于本次就到这里了，感谢大家阅读，最后祝大家生活快乐，每天都过的有意义哦，我们下期见！

image-20240606063604713

0%