工程提速,工具文档托管
2024-12-09 11:13:16

开发过程中,我们经常会整理一下业务文档或者工具文档供团队参考使用,这就是简单的前端基建工程。

以前是由公司运维来处理这活,现在脱离团队了,只能自己来了,正好这块不熟悉,统一整理一下吧。

正文

本次记录算是一个面向新手的简化版教程,这里默认大家都有一台服务器,一个简单的前端页面,都会用各自的SSH工具。

前置条件

为了保证大家都能顺利走完流程,这里先列一下需要用到的东西。

服务器选择

  1. 优先双核的服务器,虽然单核凑活也能用,但是如果同时访问人数一旦较多,单核的效率很容易产生卡顿,所以还是双核比较好
  2. 优先香港或者亚洲区服务器,不然域名绑定的时候,大陆服务器需要服务器备案,来回走流程会很麻烦
  3. 优先选择linux服务器,因为便宜,环境干净,而且相关的教程很多。当然,你也可以选择window服务器,不过同样的配置,window服务器更贵,且win系统因为自带图形界面,所以相对系统会吃掉更多的硬盘空间,所以,普遍推荐linux服务器。
  4. 优先选择腾讯云的服务器,控制台更简单更好操作,虽然安全配置不高,但是效果不错。如果经济条件允许,可选阿里云,会比腾讯云稍微贵一些。
  5. 新用户优先购买长期,所有的服务器供应商都喜欢新用户,优惠力度最大,如果你是新用户购买,能买多久就买多久,最好选个四核的,四核服务器甚至可以用来部署一些游戏的私服,并且体验相当不错。

SSH工具

SSH工具就是能够让你在本地电脑访问云服务器的工具。

因为linux不需要什么图形化界面,所以很多人都喜欢用SSH工具直连服务器,通过命令行操作。

我个人推荐MobaXterm,个人觉得它比FinalShell,Xshell,PUTTY这三个工具好用。

不过mobaxterm的免费版的连接数有上限,只能存10个服务器地址,如果一个人需要管理很多服务器,要么付费要么换一个吧。

前端页面

一个有着index.html的前端页面,当然,名字并非是强制要求,只是大家都习惯了,于是约定俗成的以index.html为准。

Nginx服务器安装

我们暂时先别管什么是Nginx,我们只要配置好Nginx,后续就可以将配置托管到服务器上。

服务器系统推荐centOS7.6,虽然这个版本的系统有点老,但是折腾的人最多,所以遇到什么问题都能找到对应的解决方案。

这里需要略懂一点linux的常规操作,如果不清楚的,推荐看文:十分钟教会你—从购买服务器到部署前端网页(适合新手或前端小白,云服务器可白嫖),这篇文章介绍的流程要比我目前的操作详细的多,我这里只是简洁版。

vim编辑nginx.repo

输入以下指令,然后按回车

1
vim /etc/yum.repos.d/nginx.repo

i键进入编辑模式,底部出现“插入”则说明成功进入编辑模式

复制以下代码,粘贴进去(注意别用ctrl+v粘贴,在finalshell里点击鼠标右键,然后选择粘贴)

注意每行开头不能有空格,否则可能会报错(vim编辑器不适用左键改变光标位置,可以通过上下左右控制)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

[nginx-mainline]
name=nginx mainline repo
baseurl=http://nginx.org/packages/mainline/centos/$releasever/$basearch/
gpgcheck=1
enabled=0
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

复制完确认没问题后,点击键盘上的esc退出编辑模式,然后输入:wq保存并退出 Vim 编辑器(注意输入法一定要是英文模式,不要因为:的中英文区别报错)

输入指令安装nginx

1
yum install -y nginx

安装完之后查看nginx状态

1
systemctl status nginx

如果控制台报的命令如下,这个说明nginx已经安装成功,但是未启动。

1
2
3
4
root@VM-0-5-centos#systemctl status nginx
nginx.service -nginx-high performance web server
Loaded: loaded (/usr/lib/systemd/system/nginx.service; disabled; vendor preset: disabled)
Active:inactive(dead)

现在启动一下nginx,启动后再次查看nginx状态,出现active (running)说明启动成功

1
ps -ef|grep nginx

查看80端口是否被nginx占用,然后在浏览器地址栏直接访问你的公网ip地址,如果出现nginx提示,则说明nginx已经配置OK。

注意,80端口是http协议的默认端口,如果你没有配置好https,这里外部访问的时候,记得要用http:// 开头访问,否则会访问无效。

配置nginx.conf

在你的电脑上新建一个文本文档,重命名为nginx.conf,用记事本打开,然后把以下内容粘贴进去

这里注意配置重点,下边这个配置是让你的目录设置,是为了让外部访问目录能指向你的服务器文件位置。

1
http://localhost/index.html

就比如我上边用locahost本地的访问的/index.html,这个按照下方配置后,就是访问/usr/local/dist/index.html

1
2
3
4
location / {
root /usr/local/dist;
index index.html;
}

root配置根目录,index配置入口文件。

打包好的文件需要放到usr下的local文件夹内,我这边前端打包生成的文件是dist,所以root配置为/usr/local/dist。

我这里需要配置两个文档托管,于是就采用了根据次级域名转换到不同文件目录的方式,根据次级域名(也有叫二级域名的)不同而指向不同的资源,从而访问不同的内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
# For more information on configuration, see:
# * Official English Documentation: http://nginx.org/en/docs/
# * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
worker_connections 1024;
}

http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';

access_log /var/log/nginx/access.log main;

sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;

include /etc/nginx/mime.types;
default_type application/octet-stream;

# Load modular configuration files from the /etc/nginx/conf.d directory.
# See http://nginx.org/en/docs/ngx_core_module.html#include
# for more information.
include /etc/nginx/conf.d/*.conf;


server {
listen 80;
server_name cattools.crazystudent13.cn;

location / {
root /usr/local/dist;
index index.html;
}

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

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


server {
listen 80;
server_name lintdoc.crazystudent13.cn;

location / {
root /usr/local/lintdoc;
index index.html;
}

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

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


# Settings for a TLS enabled server.
#
# server {
# listen 443 ssl http2 default_server;
# listen [::]:443 ssl http2 default_server;
# server_name _;
# root /usr/share/nginx/html;
#
# ssl_certificate "/etc/pki/nginx/server.crt";
# ssl_certificate_key "/etc/pki/nginx/private/server.key";
# 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 / {
# }
#
# error_page 404 /404.html;
# location = /40x.html {
# }
#
# error_page 500 502 503 504 /50x.html;
# location = /50x.html {
# }
# }

}

进入/etc/nginx目录

1
cd /etc/nginx

将目录下原有的nginx.conf拷贝一份(注意刷新一下才会显示)

1
cp nginx.conf nginxCopy.conf

备份旧配置(这一步不是必然,但是出于运维的好习惯,凡事留备份)

删除目录下的nginx.conf,然后将本地电脑上的nginx.conf上传到目录下。

1
rm -f nginx.conf

重启发布

将静态文件发布到/usr/local目录下,因为我们直接配置的是dist文件夹,这里我们需要将dist整个文件夹发到/usr/local目录下。

发布完成之后,重启nginx,读取新的配置文件

1
systemctl start nginx

为了保险,我们可以查看一下发布之后的效果,有绿色的(active)代表发布成功。

1
systemctl status nginx

访问

将下方的ip地址替换为自己的服务器地址,就可以访问到自己发布的前端页面了。

1
http://ip地址/index.html

如果不想要用IP地址在外访问,我这里就用二级域名绑定了自己服务器IP地址。

1
2
http://cattools.crazystudent13.cn
http://lintdoc.crazystudent13.cn

结语

作为前端基建的必然基石,像这种通用的工具文档部署是必然的需求。

团队化作战的过程中,我们肯定会在现代开发过程中遇到部署这些文档,这是一件绕不开的事。

这次是一次简单的部署,后续会持续集成,完成自动化部署的流程。

参考

十分钟教会你—从购买服务器到部署前端网页(适合新手或前端小白,云服务器可白嫖)