工程提速，工具文档托管
2024-07-02 11:40:03 #工程化 #nginx

开发过程中，我们经常会整理一下业务文档或者工具文档，这是我们前端基建的重要点。

文档托管部署算是运维的活了，不过我们开发本来就没必要给自己设限，干脆整理一下吧。

正文

本次记录算是一个面向新手的简化版教程，这里默认大家都有一台服务器，一个简单的前端页面，都会用各自的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。

tips

注意，如果你没有配置好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
# 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 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html;

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

        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 {
        }
    }

# 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
2
cd /usr/local
/usr/sbin/nginx -s reload

访问

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

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

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

1
http://cattools.crazystudent13.cn/

结语

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

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

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

参考

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

Prev
2024-07-02 11:40:03 #工程化 #nginx
Next