前端工程化之部署篇

Guoyeting020
100 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情

image.png

私有仓库

技术要点：Verdaccio
有些模块涉及到版权，商业业务逻辑，不能发布到网上，但又想部署一个自己的Npm私有仓库俩管理代码

  1. 可控制Npm私有仓库的访问权限
  2. 可利用内置缓存功能提升安装依赖的速度
  3. 可发布私有模块，不被权限配置外部的开发者使用
  4. 可通过代理安装Npm公有仓库不存在或安装很慢的模块
  5. 可搭配Docker与Kubernetes使用

安装

注意： verdaccio只能运行在Node v12以上的环境

// 检查当前Node版本
node -v
// 将Node版本切换到v16
nvm use 16.14.0

// 安装
npm i -g verdaccio
// 检查,输出版本表示安装成功
verdaccio -v

启动

直接执行verdaccio，输出以下信息。该信息包括verdaccio的配置文件、启用插件、服务地址等信息。

warn --- config file  - /home/user/.config/verdaccio/config.yaml
warn --- Plugin successfully loaded: verdaccio-htpasswd
warn --- Plugin successfully loaded: verdaccio-audit
warn --- http address - http://localhost:4873/ - verdaccio/5.9.0

配置

image.png

执行verdaccio -h,显示只有--listen和--config两个参数可修改默认配置。
打开FTP工具，在tool文件夹中创建verdaccio文件夹，在/tool/verdaccio目录中创建config.yaml文件，并加入内容

# url_prefix: /npm/
storage: ./storage
plugins: ./plugins
i18n:
  web: zh-CN
web:
  title: Npm私有仓库
  darkMode: true
auth:
  htpasswd:
    file: ./htpasswd
uplinks:
  npmjs:
      url: https://registry.npmmirror.com/
packages:
  "**":
    proxy: npmjs
    access: $all
    publish: $authenticated
    unpublish: $authenticated
  "@*/*":
    proxy: npmjs
    access: $all
    publish: $authenticated
    unpublish: $authenticated
server:
  keepAliveTimeout: 100
middlewares:
  audit:
    enabled: true
logs: { type: stdout, format: pretty, level: http }

注意：还有别的配置可以自己去发现！
完成配置后，把端口改成8888，把配置文件改成/tool/verdaccio/config.yaml，执行命令verdaccio -l 8888 -c /tool/verdaccio/config.yaml

部署

在服务器中配置一个全新的npm.yangzw.vip二级域名，该域名用于托管verdaccio应用

文档站点

Readme的角度来看，适合小型项目；通常一些大项目（量级比较大面向人群广）需要一个文档站点更详细说明项目信息：路由页面、国际语言、代码演示、在线演示、实时编辑等动态功能。

技术要点：dumi，文档完善，但不支持vue搭建文档站点
vue技术栈可以选择vuepress

image.png

安装

yarn add dumi dumi-theme-mobile -D

// 在package.json中指定scripts
{
	"scripts": {
		"deploy": "dumi build",
		"docs": "dumi dev"
	}
}

配置

打开多包仓库，在根目录中创建docs文件夹，在docs文件夹中创建index.md文件，加入内容：

### Bruce FEES

**Bruce FEES**是一套多功能**前端工程化多包管理**实践方案，包括多个前端开发流程中常见`脚手架`、`工具`和`类库`，其目的是简化整个开发流程，对那些重复繁琐的流程使用工具`自动化`完成，以提升整体的开发效率。

在根目录中创建.umirc.ts文件

import { defineConfig } from "dumi";

const logo = "https://static.yangzw.vip/doc/logo.png";

export default defineConfig({
	favicon: logo,
	logo,
	mode: "site",
	title: "Bruce FEES"
});

最后执行yarn run docs启动应用

更多文档站点相关配置可以移步看官方文档

持续集成

把工作流程的手动操作改为自动操作！

DevOps是一组过程、方法和系统的统称，是Development开发与Operations运维的简写，最大特性是自动化。

DevOps与CI/CD紧密相关，那么，CI/CD是什么？

持续集成：Continuous Integration，简称CI；指多名开发者在开发不同代码时可频繁地将代码合且互相不影响工作
持续部署：Continuous Deployment，简称CD；在某种程度上代表一个开发团队的更新迭代速率
持续交付：Continuous Delivery，简称CD；指在持续部署的基础上将产品交付到线上环境以实现交付高质量的产品

一个完整CI/CD包括一个CI与两个CD，CI/CD提供的流水线操作使企业更轻松地应对软件的自动快速持续交付。

avatar
文章
阅读
粉丝