前端简易服务环境搭建

Wooc
259 阅读8分钟

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

一、前言

整理笔记时发现几年前的笔记。为了解决本地环境与服务器环境下打包差异问题，白嫖了阿里云一个月的免费服务器，搭建了一个简易的线上环境，用于项目打包的测试。对于一个前端来说还是有点难度的，不过折腾出来也就没啥难度了，希望能帮助到一些和我一样遇到这种问题的前端小白吧！

以下配置及安装为已运行实测的笔记整理，严格按照该步骤进行配置，大概率上不会有问题。不懂 Linux 的小白也可配置使用。当然，最好还是了解一些 Linux 基本的命令和文件的作用，可能会更好一些。欢迎评论区交流！！！

目录

  1. 安装所需的软件
  2. 进行具体配置
  3. 使用

配置 centos 镜像源整理

1、先将原文件备份

mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo_bak

2、下载阿里源

wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo

3、建立 cache

yum makecache

4、更新源包

yum -y update

5、更新 epel 源

因为标题一中换好源后，依旧没有特定的软件。
yum install epel-release

Node

Node.js 安装包及源码下载地址为：nodejs.org/en/download… 你可以根据不同平台系统选择你需要的 Node.js 安装包，这里选择的是 Linux Binaries (x64)。

1、下载

wget https://nodejs.org/dist/v12.19.0/node-v12.19.0-linux-x64.tar.xz

2、解压

tar xf node-v10.16.0-linux-x64.tar.xz

3、进入解压目录

cd node-v10.16.0-linux-x64

解压文件的 bin 目录底下包含了 node、npm 等命令，我们可以修改 Linux 系统的环境变量（profile）来设置直接运行命令：

4、进入系统变量页面进行配置

系统变量配置文件路径：/etc/profile     编辑命令：vi /etc/profile
最初进入时为默认的只读模式，
进去之后按i开始编辑，编辑完后按Esc,再按Shift+zz组合键保存退出】：
tip：如遇到使已设定选项 'readonly' (请加 ! 强制执行)警告时      用 ：wq! 保存退出、
在最后一一行加入node、npm命令所在的地址（根据你把node解压到的文件地址为准），这里我放到root目录
export PATH=$PATH:/usr/software/node-v12.19.0-linux-x64/bin

5、立即生效

source /etc/profile

6、检测是否安装成功

node -v   // 显示版本号，即为成功安装

PM2

PM2是node进程管理工具，可以利用它来简化很多 node 应用管理的繁琐任务，如性能监控、自动重启、负载均衡等，而且使用非常简单

https://pm2.keymetrics.io/docs/usage/quick-start/

1、下载

npm install pm2@latest -g

基于终端的仪表板

pm2 monit

常用操作

1、 pm2需要全局安装
npm install -g pm2
2、进入项目根目录
2.1 启动进程/应用 pm2 start bin/www 或 pm2 start app.js
2.2 重命名进程/应用 pm2 start app.js --name wb123
2.3 添加进程/应用 watch pm2 start bin/www --watch
2.4 结束进程/应用 pm2 stop www
2.5 结束所有进程/应用 pm2 stop all
2.6 删除进程/应用 pm2 delete www
2.7 删除所有进程/应用 pm2 delete all
2.8 列出所有进程/应用 pm2 list
2.9 查看某个进程/应用具体情况 pm2 describe www
2.10 查看进程/应用的资源消耗情况 pm2 monit
2.11 查看pm2的日志 pm2 logs
2.12 若要查看某个进程/应用的日志,使用 pm2 logs www
2.13 重新启动进程/应用 pm2 restart www
2.14 重新启动所有进程/应用 pm2 restart all

Nginx

Nginx 是一个高效的 HTTP 和反向代理的服务器:nginx.org/en/ Centos 7 下安装 Nginx，使用 yum install nginx ，提示没有可用的软件包。 原因是 Nginx 位于第三方的 yum 源里面，而不在 centos 官方 yum 源里面很多软件包在 yum 里面没有的

解决的方法： 使用epel源,也就是安装 epel-release 软件包。EPEL (Extra Packages for Enterprise Linux) 是基于 Fedora 的一个项目，为“红帽系”的操作系统提供额外的软件包，适用于 RHEL、CentOS 等系统。可以找到对应的系统版本，架构的软件包

解决办法，安装 epel

yum install epel-release

1、查看可以安装的源

yum list nginx

2、更新

yum update

3、安装

yum install nginx -y

4、检测是否安装成功

nginx -v

5、配置

vim /etc/nginx/nginx.conf 修改server部分

新添加部分：由于默认端口被占用，需重新配置一个 server 服务，此处设置了不同的端口。

server {
    listen       80;
    server_name  121.196.177.219;

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

    location / {
    root      /opt/tutou/dist;
    index     index.html;
    }

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

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

// 保存后执行以下命令
 /usr/sbin/nginx -t 验证conf文件是否配置正确
 /usr/sbin/nginx -s reload 重新加载NGINX配置生效

Git

yum 安装 git 被安装在 /usr/libexec/git-core 目录下

yum -y install git

输入 git --version查看Git是否安装完成以及查看其版本号

yum安装缺点： 版本你不好控制。如果想要使用最新版的 git，那还是得自己下载源码安装。git 中没有更新命令

源码安装 （推荐）

1、进入git在GitHub上发布版本页面

https://github.com/git/git/releases,这里我们选择最新版的tar.gz包,复制下载地址
wget https://github.91chifun.workers.dev//https://github.com/git/git/archive/v2.28.0.tar.gz

2、解压缩

tar -zxvf git-2.22.0.tar.gz

3、进入到解压后的文件夹

cd git-2.22.0

4、拿到解压后的源码以后我们需要编译源码了，不过在此之前需要安装编译所需要的依赖。

yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel gcc perl-ExtUtils-MakeMaker

耐心等待安装完成，中途出现提示的时候输入y并按回车。

5、提示，安装编译源码所需依赖的时候，yum 自动帮你安装了 git，这时候你需要先卸载这个旧版的 git。

yum -y remove git

6、编译 git 源码

make prefix=/usr/local/git all

7、安装 git 至 /usr/local/git 路径

make prefix=/usr/local/git install

8、配置环境变量

vi /etc/profile 
 在底部加上
export PATH=$PATH:/usr/local/git/bin
( 输入 :wq! 保存修改)

9、刷新环境变量

source /etc/profile

10、查看Git是否安装完成

git --version

MariaDB

安装 mariadb-server，默认依赖安装 mariadb，一个是服务端、一个是客户端。

1、下载

yum install mariadb-server

2、配置 MariaDB 安装完成后首先要把 MariaDB 服务开启，并设置为开机启动

[root@mini ~]# systemctl start mariadb  # 开启服务
[root@mini ~]# systemctl enable mariadb  # 设置为开机自启动服务

首次安装需要进行数据库的配置，命令都和 mysql 的一样

[root@mini ~]# mysql_secure_installation

配置时出现的各个选项

Enter current password for root (enter for none):  # 输入数据库超级管理员root的密码(注意不是系统root的密码)，第一次进入还没有设置密码则直接回车

Set root password? [Y/n]  # 设置密码，y

New password:  # 新密码
Re-enter new password:  # 再次输入密码

Remove anonymous users? [Y/n]  # 移除匿名用户， y

Disallow root login remotely? [Y/n]  # 拒绝root远程登录，n，不管y/n，都会拒绝root远程登录

Remove test database and access to it? [Y/n]  # 删除test数据库，y：删除。n：不删除，数据库中会有一个test数据库，一般不需要

Reload privilege tables now? [Y/n]  # 重新加载权限表，y。或者重启服务也许


测试是否能够登录成功，出现  MariaDB [(none)]> 就表示已经能够正常登录使用MariaDB数据库了
[root@mini ~]# mysql -u root -p
Enter password: // 在这里输入刚刚设置的密码

3、设置 MariaDB 字符集为 utf-8（可选） vi /etc/my.cnf 编辑改文件

#
# This group is read both both by the client and the server
# use it for options that affect everything
#
[client-server]

#
# include all files from the config directory
#
!includedir /etc/my.cnf.d

#该值指在服务器中创建数据库的默认设置--新增该项
[mysqld]
init_connect='SET collation_connection = utf8_unicode_ci'
init_connect='SET NAMES utf8'
character-set-server=utf8
collation-server=utf8_unicode_ci
skip-character-set-client-handshake

#该项值使用客户端连接改数据库时的客户端默认设置--新增该项
[client] 
default-character-set=utf8

[mysql]
default-character-set=utf8

4、重启服务

[root@mini ~]# systemctl restart mariadb

5、登录进入 mariadb 查看字符集，如 value 一行大多为 utf-8 则设置成功

show variables like "%character%";

远程链接mariadb数据库

mariadb 默认是拒绝 root 远程登录的。这里用的是 navicat 软件连接数据库

1、查看开启端口3306（数据库默认端口）

[root@mini ~]# firewall-cmd --query-port=3306/tcp  # 查看3306端口是否开启
no
[root@mini ~]# firewall-cmd --zone=public --add-port=3306/tcp --permanent  # 开启3306端口
success
[root@mini ~]# firewall-cmd --reload  # 重启防火墙
success
[root@mini ~]# firewall-cmd --query-port=3306/tcp  # 查看3306端口是否开启
yes

2、先查看 mysql 数据库中的 user 表

[root@mini ~]# mysql -u root -p  # 先通过本地链接进入数据库

MariaDB [(none)]> use mysql;

MariaDB [mysql]> select host, user from user;
+-----------+------+
| host      | user |
+-----------+------+
| 127.0.0.1 | root |
| ::1       | root |
| localhost      | root |
+-----------+------+
3 rows in set (0.00 sec)

3、将与主机名相等的字段改为 "%" ，我的主机名为 localhost (默认的主机名)，

MariaDB [mysql]> update user set host='%' where host='localhost';
Query OK, 1 row affected (0.00 sec)
Rows matched: 1  Changed: 1  Warnings: 0

MariaDB [mysql]> select host, user from user;
+-----------+------+
| host      | user |
+-----------+------+
| %         | root |
| 127.0.0.1 | root |
| localhost | root |
+-----------+------+
3 rows in set (0.00 sec)

4、刷新权限表，或重启 mariadb 服务，一下二选一即可

1、MariaDB [mysql]> flush privileges;
Query OK, 0 rows affected (0.00 sec)

注意：刷新权限表是在数据库中，重启服务是在外部命令行中

2、[root@mini ~]# systemctl restart mariadb // 刷新权限表

6、重新远程链接 mariadb，正确输入账号密码即可

Firewalld 防火墙

CentOS 7 及更高版本，中使用 firewalld 作为默认防火墙管理工具firewalld.org/ ，可在官网查看当前系统是否支持默认安装 提供了动态托管的防火墙，并支持定义网络连接或接口的信任级别的网络/防火墙区域。它支持 IPv4，IPv6 防火墙设置，以太网桥和 IP 集。运行时和永久配置选项分开。它还为服务或应用程序提供了一个接口，以直接添加防火墙规则。

基本使用：

启动： systemctl start firewalld
查看状态： systemctl status firewalld / firewall-cmd state 这个命令也可以，只是信息会简单点
停止： systemctl disable firewalld
禁用： systemctl stop firewalld

常用命令：

添加
firewall-cmd --zone=public --add-port=80/tcp --permanent   （--permanent永久生效，没有此参数重启后失效）
重新载入，添加端口后重新载入才能起作用
firewall-cmd --reload
查看端口
firewall-cmd --zone=public --query-port=80/tcp
删除端口
firewall-cmd --zone=public --remove-port=80/tcp --permanent
查看开启了哪些服务
firewall-cmd --list-services
查看开启了哪些端口
firewall-cmd --list-ports
查看还有哪些服务可以打开
firewall-cmd --get-services
查看所有打开的端口：
firewall-cmd --zone=public --list-ports
更新防火墙规则：
firewall-cmd --reload

这里我开启了 80 和 443 端口使用，tip：每次设置好打开后关闭的端口后，都需要重新载入才可生效

自动化构建 （这里指的是前端项目及 node 项目）

监听 gitee 或 github 等代码仓库的 push 请求，自动构建项目

// 这里我没有用webhook的npm包，是自己接收到指定接口发过来的数据，过滤push请求，然后使用shell脚本处理
// 这会有安全隐患，因为只是自己使用，所以这里只管实现
// 这里以拦截vue项目的push为主，进行项目的更新和重新构建，
// 旨在最简单的实现自动构建项目的目的，node项目也可按此方式，
// 进行项目更新和重启运行
var http = require('http')
var shell = require('shelljs')

http.createServer(function (req, res) {
    console.log(req.headers['x-git-oschina-event'],req.headers['x-git-oschina-event'] === 'Push Hook', '接收')
   if(req.headers['x-git-oschina-event'] === 'Push Hook'){
    	console.log('接受到push请求')
	rebuild()
   }
}).listen(443,() =>{
    console.log('WebHooks Listern at 443');
})

 // shell脚本处理，重新构建项目
function rebuild () {

	shell.cd('/opt/tutou')
	console.log('开始执行git！')
	//即同步运行外部工具
	if (shell.exec('git pull').code !== 0){ // 拉取最新代码
   	  shell.echo('Error: Git pull failed');
 	  shell.exit(1);
 	}

	if (shell.exec('npm install').code !== 0){ // 下载依赖
  	  shell.echo('Error: installt failed');
  	  shell.exit(1);
	}
	
	console.log('开始构建！')

	if (shell.exec('npm run build').code !== 0){ // 构建项目
  	  shell.echo('Error: installt failed');
  	  shell.exit(1);
	}

	console.log('构建成功！')
}

nodemailer 邮箱通知

自动化构建之后，我使用 nodejs 处理 nodemailer 的 npm 包，在构建完成或失败之后，发送详细的代码执行情况的邮件到我的邮箱，通知我 理论上支持所有主流邮箱，但我只测试了 QQ 和 163，都成功了。若其他邮箱出问题请留言交流。

1、安装：

npm install nodemailer -D

2、代码实现

 //引入模块 nodemailer
 const nodemailer = require('nodemailer')

 const config = {
    // 163邮箱 为smtp.163.com
    // 其他邮箱也可，详细可问度娘这里只管实现
    host: 'smtp.163.com',
    //端口必要
    port: 465, 
    auth: {
        // 发件人邮箱账号
        user: '*******@163.com', 
        //发件人邮箱的授权码 需要开启邮箱的 POP3/SMTP 服务。
        // 改服务的开启可问度娘，这里不展开了，只管实现
        pass: '*****'  // 我这里隐藏的自己的授权码
    },
    tls: {
      rejectUnauthorized: false
  }
 }

 const transporter = nodemailer.createTransport(config)

  const mail = {
    // 发件人 邮箱  '昵称<发件人邮箱>' 这里要记住，是 昵称 后面跟 <邮箱> 
    from: '超<*****@163.com>',
    // 主题
    subject: '测试',
    // 收件人 的邮箱 可以是其他邮箱 不一定是qq邮箱
    to: '****@qq.com',
    // 内容
    text: `123` ,
    //这里可以添加html标签
    html: '<a href="https://www.baidu.com/">百度</a>'
 }

 transporter.sendMail(mail, function(error, info){
    if(error) { // 发送失败，打印错误
        return console.log(error);
    }
    transporter.close()
    console.log('mail sent:', info.response) // 发送成功
 })

常见错误：

535 错误：可能是账号密码错误

553 错误：发件人和认证的邮箱地址不一致，auth.user 需要与 from 中的邮箱一致

avatar
文章
阅读
粉丝