20分钟手把手教你从零搭建到部署前端项目

Pupuu
1,495 阅读4分钟

前言

也许这是一篇最简单好实践的前端项目搭建部署指南！

新手可能只知道如何创建一个前端项目，并不知道你的组长如何从创建项目，到应用构建，到云配置部署，背后到底悄悄做了哪些前端非编码工作。鲜有一篇文章能给新手以一个全盘的视角来从头扒到底。

本文就以“让新手全视角了解前端项目的创建、构建、部署、上线”为目标，来给大家串联一下前端项目的搭建全过程。抛砖引玉，希望大家学习前端更轻松。

文档脉络

  • 项目搭建（antD pro为例）
  • CICD自动构建（云效流水线为例）
  • 线上部署（阿里云配置为例）
  • 区分开发、测试、线上环境

第一步，创建项目仓库

首先，我们来创建一个项目。 此处，我们用最常用的大后台为例，以AntD Pro来快速搭建一个后台项目。安装教程如下：

Ant Design Pro，基于antD和umi封装的企业级中后台前端/设计解决方案 pro.ant.design/zh-CN/docs/…

截屏2023-10-26 11.13.34.png

现在，我们有一个项目了。

但是项目代码在我们电脑本地，我们需要用git来创建一个仓库，托管我们的项目代码。

仓库可在github、gitee、gitlab等分布式版本控制平台上来创建，因为后续打算用云效流水线来管理工程，所以代码我们在这里也一并托管在云效了。

啰嗦一句：其中，github一般放开源项目，私有仓库是需要付费的；gitlab可以放企业项目，可以在自己服务器上免费搭建私有仓库

云效codeup：codeup.aliyun.com/

截屏2023-10-26 11.53.52.png

如图，创建完仓库后，我们进入本地代码进行git初始化配置

cd existing_folder
git init
git remote add origin git@codeup.aliyun.com:6423e5b4b6809992bxxxxxxx/web/proj.git
git add .
git commit
git push -u origin master

截屏2023-10-26 12.13.50.png

至此，我们的项目代码已经成功托管到了云仓库中！

第二步，阿里云线上配置

在第一步中，我们的项目已经可以在本地跑起来，用localhost来访问了。那么如何将项目部署到线上访问呢，这里就涉及到一系列云平台项目部署工作了。云平台选择众多，国内流行云平台有阿里云、腾讯云、华为云等，可根据喜好和价格选择合适的云厂商产品。在此，我们以阿里云为例。

下边，我们需要进行如下一系列配置：

  • oss创建bucket
  • 域名解析
  • https配置

首先，我们项目需要打包项目以压缩代码。 npm run build（看我控制台可萌吧！！！😬） 打包产物在dist目录中查看。

截屏2023-10-26 14.14.36.png

截屏2023-10-26 14.15.45.png

接下来，将打包产物静态资源发布到OSS。其中，bucket是OSS的存储空间，我们来为这个项目创建一个bucket，如下（注意读写权限为公共读）：

截屏2023-10-26 14.07.44.png

将打包产物上传到该bucket，并配置域名解析，如下：

截屏2023-10-26 14.34.37.png

截屏2023-10-26 15.04.59.png

耶，现在可以线上域名访问啦！

截屏2023-10-26 15.04.06.png

继续，我们来申请ssl证书，给域名绑定证书。证书可免费申请，但是每年得手动更新。签发成功后，在刚才域名绑定处配置托管https证书即可~

截屏2023-10-26 15.07.59.png

第三步，CICD自动构建

好了，现在我们可以开始动手开发业务需求了。

开发过程中，一次次的提交，一次次的打包，一次次的部署，怎样才能偷懒一键打包构建部署呢。这就用到CICD平台啦，产品也比较多，这里我们以云效流水线为例子。

flow.aliyun.com/

  1. 新建流水线，选择“Node.js React构建上传到OSS”模版
  2. 关联codeup托管的项目代码以及分支
  3. 配置构建命令
  4. 配置OSS上传参数：bucket、第二步中打包文件目录 如下图：

截屏2023-10-27 10.49.17.png

截屏2023-10-27 10.52.30.png

现在，提交完代码，点一下流水线运行，代码就发布上线啦！ 后续，还可以配置git钩子使代码合并到某一分支（如publish分支）后，自动触发构建部署等进阶的企业级配置。

截屏2023-10-27 11.15.35.png

第四部，区分开发、测试、线上环境

代码中

首先，区分三份环境变量文件：

.env.dev:  ICE_BASEURL=//localhost:3000/api
.env.prod: ICE_BASEURL=//dev-mall.xxx.com/api
.env.test: ICE_BASEURL=//mall.xxx.com/api

然后，package.json中的启动命令，分别指定环境模式mode

"scripts": {
    "start": "ice start --speedup --mode dev",
    "build:test": "ice build --mode test",
    "build:prod": "ice build --mode prod",
  },

代码，区分分支。

开发环境：feat-xxx
测试环境：dev
线上环境：master

云服务上

bucket创建区分test和prod环境；

线上环境：web-cms
测试环境：web-cms-dev

CNAME绑定域名区分不同的访问地址

线上环境：https://cms.xxx.com
测试环境：https://dev-cms.xxx.com

流水线中，分别创建测试环境流水线、正式环境流水线，并指定不同的代码分支、构建脚本命令、上传bucket。

最后

至此，我们的工程从创建到自动部署上线，简易的全流程配置就演示完毕啦。不同的产品选型、不同的项目架构，会有不同的选型和配置方案，希望此文对初次接触的你，有一个大致的脉络启发！

祝大家程序员之路开发愉快~

avatar
文章
阅读
粉丝