前端架构-基础服务建设

Spig
22 阅读4分钟

系列文章:

  1. 前端还需要架构设计?
  2. 前端工程化建设

基础生态建设

简介

基础服务:是指前端开发部署流程中的需要用到最基础的服务,与项目本身无关;

开源文档地址

前端需要做什么捏?
主要是配合运维同时搭建好基础服务,提供给前端项目使用;

主要包括:

  • git服务: 版本控制,代码协作,工具(gitlab,github,gitee等)

  • npm包管理: 依赖管理,版本控制,工具(npmjs,nexus,verdaccio等)

  • CI/CD: 持续集成,自动部署,工具(github/gitlab actions,jenkins等)

  • NGINX: 代码部署,反向代理,跨域处理,缓存(cache-control,expires等),动静分离等

  • CDN/CLB: 负载均衡,静态资源加速

基础服务.png

一丶GIT服务

null_git服务.png

先说git服务,因为它是项目开发的基础,也是代码协作的基础;比如gitlab,github,Gogs,gitea,gitee等;

怎么选择捏?

  • 私有化部署: 优先gitlab (服务器资源充足),功能完善;否则可以选择Gogs或gitea,简单直接易上手
  • 开源或个人团队: github或gitee;怎么方便,就用哪个;

前端关注什么:

  • webhook: webhook配置要方便,代码合并,ci/cd触发等,自定义脚本都可以用到;
  • action: 能有action方便,可以自定义节点,实现自动化;
  • 权限功能完善:代码的分支管理,人员权限把控,避免代码混乱,防止误操作;

二丶NPM包管理

null_npm包管理.png

npm包作为前端依赖,是项目开发的基础;我们主要关注2个点:

  • npm源: npmjs作为官方源,主要问题是速度慢,稳定性差,也可以使用cnpm作为替代源;
  • npm私有库:
    公司内部可以搭建nexus或verdaccio作为私有库,提供包管理,权限控制,缓存等功能; 主要是为了:
    • 加速依赖下载: 私有库可以缓存常用的依赖,避免重复下载,提高项目构建速度;
    • 权限管理: 可以根据项目需要,设置不同的权限,避免误操作;
    • 稳定性: 私有库可以提供高可用的服务,确保项目的正常运行;

三丶CI/CD

null_CICD.png

CI/CD是指持续集成,持续部署,是项目开发的基础; 主要是为了:

  • 自动化: 可以自动构建,测试,部署项目,避免手动操作;
  • 快速反馈: 可以快速反馈项目的问题,及时修复;
  • 高可用: 可以搭建集群,提供高可用的服务;

主要工具:

  • github/gitlab actions: 免费,功能完善,配置方便;
  • jenkins: 免费,功能完善,自定义强大;

四丶NGINX

null_NGINX.png

NGINX是一个高性能的Web服务器,主要是为了:

  • 前端部署: 前端项目部署在NGINX上,提供静态资源服务;
  • 反向代理: 可以将请求转发到后端的应用服务器,实现负载均衡;
  • 跨域处理: 可以处理跨域请求,避免跨域问题;
  • 动静分离: 可以将动态请求和静态请求分离,提高服务器的性能;

前端部署

在NGINX上部署静态网站,主要以下几个关键点:

  1. history模式: vue,react 的history模式, 需要在NGINX配置中添加try_files指令:
server {
    listen 80;
    server_name example.com;

    location / {
        root '前端项目目录';
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}
  1. 文件的缓存策略: html协商缓存,js,css等静态资源文件强缓存
    • 协商缓存: 判断html是否有新版本,如果有,返回新文件,如果没有,返回304,不返回文件内容;
    • 强缓存: 可以避免浏览器重复请求,提高页面加载速度;
server {
    listen 80;
    server_name example.com;

    location / {
        root '前端项目目录';
        # html 文件协商缓存
        if ($request_filename ~* \.html$) {
            add_header Cache-Control "no-cache";
        }
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}
avatar
文章
阅读
粉丝