前端项目部署全攻略：从本地到线上

碎碎念

前端写了那么久，关于具体的部署流程却是0经验。。。公司没有机会实践，自己又囊中羞涩不舍得花钱。四处收集了大佬们的部署经验，写个帖子记录一下

前言

在本文中，我们将探讨如何将前端项目从本地环境部署到线上，确保其他用户可以访问和使用。我们将涉及项目构建、服务器选择、域名配置、文件上传、服务器配置等关键步骤，并以GitHub Pages和自定义域名为例，提供一个详细的部署流程。

基本部署步骤概览

1. 项目构建: 使用构建命令（例如npm run build）在本地生成优化后的项目文件夹（通常是dist或build）。

2. 选择服务器: 根据需求选择Web服务器（如Apache、Nginx）或云服务（如AWS S3、Google Cloud Storage、Azure Storage），也可考虑前端专用托管平台（如Netlify、Vercel、GitHub Pages）。

3. 域名配置: 购买并解析域名到服务器IP，或将其指向托管平台提供的默认域名。

4. 上传文件: 将构建好的文件通过FTP、SCP或托管平台提供的工具上传到服务器。

5. 服务器配置: 设置服务器上的MIME类型和路由规则，确保内容正确展示。

6. 启动服务: 如果使用Web服务器，启动或重启服务；云服务或托管平台通常会自动处理。

7. 测试: 访问域名并测试页面及功能是否正常工作。

使用GitHub Pages和自定义域名部署

1. 构建项目: 生成dist或build文件夹。

2. 上传到GitHub: 推送项目或构建文件到GitHub仓库。

3. 创建GitHub Pages: 在仓库设置中启用GitHub Pages，选择源分支。

4. 域名配置: 购买域名并在DNS设置中添加CNAME记录指向GitHub Pages链接，同时在GitHub设置中添加自定义域名。

5. DNS解析: 等待DNS解析完成以便通过自定义域名访问项目。

6. 测试: 确保自定义域名的页面和功能无误。

结语

理论已知，那么实践就要开始。等我研究一下《云开发》，把一个完整的项目呈现出来，继续写这篇帖子，敬请期待。ps：有错误的地方大佬请指出，马上修改