部署 web 应用

本文介绍两种部署静态页面的方法。

方案一：使用托管平台

一些面向开发人员的端到端平台，使用方法很简单。

推荐Vercel，绑定 GitHub 账号后就可以进行部署设置了，并且它会在提交代码后自动部署，完全不用再进行配置。

国内用户无法访问的问题

对于中国大陆用户来说，Vercel 站点一般是无法访问的（除非有特殊上网手段，你懂的），这并不是 Vercel 的问题，因为它部署的站点都被 DNS 污染了。具体解决方法可以参照这篇文章。

方案二：部署到自己的服务器

如果有一定开发经验，更推荐部署在自己的服务器，拓展性更强。

基本部署流程

一、前期准备

1. 购买服务器

2. 配置安全组，把8080端口放开，其余的如3306（Mysql）等也可以放开

3. 登录服务器

推荐在vscode利用remote Explorer插件连接服务器

shell

ssh root@服务器公网ip

输入服务器密码即可完成连接，此时在vscode当前窗口执行的所有操作都视为在服务器上操作。

二、nginx 配置

1. 下载 nginx

shell

dnf install nginx

2.启动 nginx

shell

# 启动nginx
systemctl start nginx
# 查看nginx运行状态
systemctl status nginx
# 服务器重启后自动启动nginx
systemctl enable nginx

此时打开公网 IP 可以看到 nginx 的默认页面，我们要做的就是把自己的页面替换上去。

3.手动上传生产文件至服务器

在服务器新建一个文件夹，用于存放项目打包后的文件

remote Explorer连接服务器后，可直接在vscode文件区新建，也可通过命令新建：

shell

# 在服务器根目录新建一个 `test` 文件夹，用于存放线上文件（文件夹名称随意，test意为测试）
mkdir /root/test

将本地打包好的生产环境文件，将打包文件夹（即 build、dist 等）里的所有内容拖入 test 文件夹中。

4.配置访问目录

相应地，也需要告知nginx访问上述的目录。打开/etc/nginx，将文件夹添加到工作区

找到nginx.conf文件，需要编辑其中的两处内容：

txt

# 1.修改用户
user nginx; // [!code --]
user root; // [!code ++]
# 2.配置访问目录
# 2.1 注释掉下面这行
root /usr/share/nginx/html; // [!code --]
# 2.2 指定访问目录
location / {
    root /root/test;// [!code ++]
    index index.html;// [!code ++]
}

5. 重启 nginx

shell

systemctl restart nginx

再次打开公网 ip，此时的展示的页面即为项目页面。

三、配置域名（可选）

大多数情况下，我们需要配置一个专属的域名，就比如邀请朋友来家里做客的时候，一般都会说 XX 小区 XX 幢，而不是一个经纬度。同理，用户可记不住一大串的 ip 地址，我们要做的，就是让 ip 绑定自己的域名，这样才能让用户通过好记的域名访问到我们的项目。

具体的操作步骤可以参考服务器提供商的文档，主要分为以下几个步骤：

1. 购买域名

2. 配置域名解析

将域名解析到服务器的公网 ip 地址。

3. 配置 nginx 反向代理

打开nginx.conf文件，在server块中添加以下内容(仅供参考)：

shell

   # 省略若干配置
    server {
        listen 80;
        server_name conyu.co;    #填写您的证书绑定的域名，此处以conyu.co为例
        # redirect to https
        return 301 https://$host$request_uri;  	 #将http的域名请求转成https
    }


    # Settings for a TLS enabled server.
    server {
       listen       443 ssl http2 default_server;
       listen       [::]:443 ssl http2 default_server;
       server_name  conyu.co;
       root         /usr/share/nginx/html;

     # 手动添加证书（需要自己购买证书）
     # ssl_certificate "conyu.co_bundle.crt";
     # ssl_certificate_key "conyu.co.key";

     # 通过certbot自动添加证书（可自动续期，推荐）
       ssl_certificate /etc/letsencrypt/live/conyu.co/fullchain.pem;
       ssl_certificate_key /etc/letsencrypt/live/conyu.co/privkey.pem;

       ssl_session_cache shared:SSL:1m;
       ssl_session_timeout  10m;
       ssl_ciphers PROFILE=SYSTEM;
       ssl_prefer_server_ciphers on;


       # Load configuration files for the default server block.
       include /etc/nginx/default.d/*.conf;

       location / {
            root /root/blog; # 配置自己的访问目录
            index /index.html;
        }

       error_page 404 /404.html;
           location = /40x.html {
       }

       error_page 500 502 503 504 /50x.html;
           location = /50x.html {
       }
   }

4. 重启 nginx

shell

systemctl restart nginx

进阶：自动化部署

手动部署代码的缺点是每一次代码更新都需要重新替换新包，如果想解决这个问题，可选择进阶操作，实现自动化部署。利用 jenkins 完成自动化部署配置后，会自动拉取最新的 git 仓库代码进行构建并部署，十分方便。

一、安装 Java 环境

jenkins依赖java，所以需要安装Java环境。

shell

# 查找所有java安装包
dnf search java
# 安装合适的包
dnf install java-17-openjdk

二、连接 jenkins 仓库

wget是Linux下载文件的工具，-O 表示输出到某个文件夹并命名为什么文件
rpm 全称为 The RPM Package Manage，是Linux下一个软件包管理器

shell

wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat-stable/jenkins.repo
# 导入GPG密钥确保该软件合法
rpm --import http://pkg.jenkins-ci.org/redhat/jenkins-ci.org.key

编辑文件/etc/yum.repos.d/jenkins.repo

shell

vim /etc/yum.repos.d/jenkins.repo
# 输入i可编辑，esc退出编辑，:wq保存并退出vim

把以下内容粘贴进去(如果这些内容已存在，则不用做操作)

shell

[jenkins]
name=Jenkins-stable
baseurl=http://pkg.jenkins.io/redhat-stable
gpgcheck=1

三、jenkins 配置

下载Jenkins

shell

dnf install jenkins

启动并配置Jenkins(原理同上)

shell

systemctl start jenkins
systemctl status jenkins
systemctl enable jenkins

启动完成后就可以打开Jenkins配置页了，注意安全组要把8080端口放开 ▶ 服务器公网 ip :8080

进入页面后提示需要管理员密码，根据页面所给的目录获取密码，方式为

shell

cat /var/lib/jenkins/secrets/initialAdminPassword

4.填入密码后安装推荐的插件

5.创建管理员用户

6.实例配置（一般不用操作，直接保存并完成）

四、项目配置

新建一个任务，输入任务名称，选择自定义项目。

开始该项目的配置。接下来将分板块逐个讲解。

TIP

配置共分为六个板块分别是：General、源码管理、构建触发器、构建环境、Build Steps、构建后操作。

General

略

源码管理

安装git

shell

dnf install git

输入仓库地址，如果是私有仓库，请添加凭证，确保Jenkins有权限拉取代码
指定拉取代码分支，默认为/master，确保目标构建分支与之保持一致。

TIP

如果当前仓库为私有，Jenkins 需要进行额外的验证操作才能构建，具体可见下文私有仓库权限问题

构建触发器

定时构建，具体触发器规则可自行查询，以下是一个常用规则：

shell

# 每半小时构建一次
H/30 * * * *

轮询 SCM(可选)，触发器规则同上，区别是有更新则构建，否则忽略

构建环境

安装 NodeJS

回到首页（dashboard），系统管理 => 插件管理 => 安装插件，找到NodeJS并安装，勾选安装后重启Jenkins。

NodeJS 配置

重启Jenkins后，来到系统管理 => 全局工具配置，找到NodeJS，新增。

输入别名，指定 NodeJS 的版本(推荐长期稳定版)

配置构建环境

勾选 Provide Node & npm bin/ folder to PATH

Build Steps

增加构建步骤，选择执行shell，输入命令(示例仅供参考)

shell

pwd
node -v
npm -v

# 安装依赖包
npm install
# 打包命令
npm run docs:build

pwd

echo '构建成功~ 🚀'

ls

# 删除 test 文件夹里所有内容
rm -rf /root/test/*
# 复制打包后的新文件至 test 文件夹
cp -rf ./docs/.vitepress/dist/* /root/test

保存配置，选择立即构建。发现构建失败，原因是Jenkins默认没有访问权限，还需要进行权限配置。

五、后续权限配置

共有三种方法添加权限，任选其一即可

修改用户

修改文件的路径 /etc/sysconfig/jenkins

shell

# 将JENKINS_USER改为root
JENKINS_USER="root"

将Jenkins添加到 root 组

shell

sudo usermod -a -G root jenkins

shell

chown -R jenkins /root/test
# 或者用管理员权限
sudo chown -R jenkins /root/test

执行完上述任意操作后记得重启Jenkins

shell

systemctl restart jenkins

此时再次构建，如果控制台输出Finished: SUCCESS代表构建成功 ✨。

后续只需在git仓库中提交代码，Jenkins将自动拉取分支代码构建。

私有仓库权限问题

如果构建的是私有仓库，需要为 Jenkins 配置凭证才能访问到源码。方法有多种，这里只提供SSH 密钥对配置的教程，其他方法可以自行查找资料。

生成 SSH 密钥对：
在 Jenkins 服务器上生成一个 SSH 密钥对
shell
```
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
```
1
按照提示操作，将生成的密钥对保存在默认位置（~/.ssh/id_rsa 和 ~/.ssh/id_rsa.pub）。
在 Git 服务中添加公钥：
- 如果使用 GitHub，前往仓库页面 -> 设置 -> 部署密钥 -> 添加部署密钥，将 ~/.ssh/id_rsa.pub 的内容粘贴进去，并确保勾选 "允许写入访问"（如果需要）。
在 Jenkins 中添加 SSH 凭据：
- 打开 Jenkins 控制台，进入 "管理 Jenkins" -> "管理凭据" -> "(全局)" -> "添加凭据"。
- 类型选择 "SSH 用户私钥"：
  - 用户名：你的github的用户名
  - 私钥：选择 "直接输入" 并粘贴 ~/.ssh/id_rsa 的内容。
配置 Jenkins 项目：
- 新建一个 Freestyle 项目或者配置现有项目。
- 在 "源码管理" 部分，选择 "Git"。
- 仓库 URL 填写 git@github.com:user/repo.git（将 user/repo 替换为你的实际仓库路径）。
- 在 "凭据" 下拉菜单中，选择你之前添加的 SSH 凭据。
配置 known_hosts 文件

添加凭据后，如果报错（无法连接私有仓库），大概率没有配置 known_hosts 文件，解决方法如下：

1. 获取主机密钥并生成 known_hosts 文件：

在 Jenkins 服务器上执行：

shell

ssh-keyscan github.com >> ~/.ssh/known_hosts

你可以将 github.com 替换为你的私有仓库主机名。

1. 在 Jenkins 中配置 known_hosts 文件：

打开 Jenkins 控制台，进入 "管理 Jenkins" -> "安全配置"。
找到 "Git Host Key Verification Configuration"。
选择 "Manually provided key verification"。
将 ~/.ssh/known_hosts 文件的内容粘贴到输入框中。

1. 验证配置：

打开你的 Jenkins 项目配置。
确保在 "源码管理" 部分，Git 仓库 URL 使用的是 SSH URL，例如 git@github.com:user/repo.git。
在 "凭据" 下拉菜单中选择你之前添加的 SSH 凭据。
保存并应用配置。

1. 测试配置：

手动触发构建任务，查看 Jenkins 控制台输出，确认仓库克隆和构建过程是否成功。

部署 web 应用 ​

方案一：使用托管平台 ​

方案二：部署到自己的服务器 ​

基本部署流程 ​

一、前期准备 ​

1. 购买服务器 ​

2. 配置安全组，把8080端口放开，其余的如3306（Mysql）等也可以放开 ​

3. 登录服务器 ​

二、nginx 配置 ​

1. 下载 nginx ​

2.启动 nginx ​

3.手动上传生产文件至服务器 ​

4.配置访问目录 ​

三、配置域名（可选） ​

1. 购买域名 ​

2. 配置域名解析 ​

3. 配置 nginx 反向代理 ​

4. 重启 nginx ​

进阶：自动化部署 ​

一、安装 Java 环境 ​

二、连接 jenkins 仓库 ​

三、jenkins 配置 ​

四、项目配置 ​

General ​

源码管理 ​

构建触发器 ​

构建环境 ​

Build Steps ​

五、后续权限配置 ​

私有仓库权限问题 ​

部署 web 应用

方案一：使用托管平台

方案二：部署到自己的服务器

基本部署流程

一、前期准备

1. 购买服务器

2. 配置安全组，把8080端口放开，其余的如3306（Mysql）等也可以放开

3. 登录服务器

二、nginx 配置

1. 下载 nginx

2.启动 nginx

3.手动上传生产文件至服务器

4.配置访问目录

三、配置域名（可选）

1. 购买域名

2. 配置域名解析

3. 配置 nginx 反向代理

4. 重启 nginx

进阶：自动化部署

一、安装 Java 环境

二、连接 jenkins 仓库

三、jenkins 配置

四、项目配置

General

源码管理

构建触发器

构建环境

Build Steps

五、后续权限配置

私有仓库权限问题