欢迎关注系列专栏: 《小团队web技术搭建》
《小团队web技术搭建》(一)环境和工具的准备-第一部分
《小团队web技术搭建》(二)环境和工具的准备-第二部分
《小团队web技术搭建》(三)环境和工具的准备-第三部分
《小团队web技术搭建》(四)虚拟机的安装使用
《小团队web技术搭建》(五)项目的简单部署方式
《小团队web技术搭建》(六)自动化部署方式(CI/CD)(一)
《小团队web技术搭建》(七)自动化部署方式(CI/CD)(二)
持续更新中...
为了方便有些读者的理解,我们从比较原始、简单的服务器部署开始讨论,后面的文章再介绍更为合理的方式以及需要的环境、工具。
准备一个基础前端项目
项目只包含一个index.html
,以做最简演示,运行结果只显示一行“Hello world!”:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello world!</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
将代码上传git,我存放在github这个目录:https://github.com/doterlin/small-team-tech/tree/main/demo/simple-demo
git上传在部署流程中并非是必须的,如果你在部署的时候不需要git来拉取代码的话。
连接服务器
连接远程服务器你需要一个连接工具,比如:MobaXterm、IIS7、SecureCRT(付费)等等。我比较喜欢用的是MobaXterm
,并且用它来做演示。
- 新建一个连接会话,按图示顺序设置完成:
- 双击刚才新建好的会话,输入密码连接即可完成:
首先我们要做的是想办法上传代码到服务器。
方式1. Git拉取项目
新建一个用于存放项目的目录并进入,目录位置根据自己需要去定:
mkdir -p /www/projects/demo/
cd /www/projects/demo/
clone下来项目,发现git未安装:
git clone git@github.com:doterlin/small-team-tech.git
-bash: git: command not found
我们安装一下git(根据linux版本不同,安装方式不同):
yum install git
生成ssh key:
ssh-keygen -t rsa -C "your_email"
显示出来public key,然后复制它:
cat ~/.ssh/id_rsa.pub
把key粘贴到git托管平台:
把复制的key粘贴到Key
一栏,Title
填写一个你能知道是来自哪台机子的名字:
再次进行git clone:
至此我们的代码就算同步到服务器了,当以后有代码更新时就git pull一下代码即可。
方式2. FTP上传项目
我们也可以用看起来更加简单的方式,直接用FTP或SFTP协议(File Transfer Protocol 文件传输协议)上传文件到服务器。
进入之前我们新建的目录,在它下面新建一个目录:
cd /www/projects/demo/
mkdir demo1
cd demo1
MobaXterm
的界面有比较方便的FTP支持,点击左侧的SSH brower,勾选下面的Follow teminal folder
(或者你可以自己手动进入目录),再点击上面的upload图标,选择一个目录上传(在此之前我们压缩下项目包,因为不支持上传文件夹):
现在代码的压缩包已经上传了:
解压:
unzip simple-demo.zip
Archive: simple-demo.zip
inflating: index.html
代码上传完毕,部分ssh客户端还支持lrzsz服务
,比如SecureCRT
,输入rz
命令即可选择文件上传:
rz
配置nginx
文件上传完毕,我们需要用代理服务器把他解析到公网。
先查看nginx是否已安装:
nginx -v
nginx version: nginx/1.20.1
如果没安装,请根据自己linux的系统安装和启动nginx。
查看nginx状态和配置文件位置:
nginx -t
nginx: the configuration file /www/server/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /www/server/nginx/conf/nginx.conf test is successful
现在我们知道nginx的配置文件是/www/server/nginx/conf/nginx.conf
,接着编辑它:
vim /www/server/nginx/conf/nginx.conf
在http
字段里面加入几行配置,解析我们刚才上传的代码,端口号随意(只要不被占用):
server {
listen 8989;
root /www/projects/demo/small-team-tech/demo/simple-demo/;
}
如果你对nginx的配置规则不熟悉,可以使用一些生成工具进行生成(当然我还是建议你去学习下,成本不高),如:https://github.com/digitalocean/nginxconfig.io
接着刷新一下配置:
nginx -s reload
我们尝试在服务器里请求下我们部署的文件,是通的:
curl localhost:8989/index.html
但公网地址http://47.96.177.197:8989/index.html
是不通的:
你可能需要检查下防火墙:
# iptables
iptables -L
# ufw
ufw status
# firewalld
firewall-cmd --list-all
以及看看服务器云厂商的端口放行,比如阿里云的添加安全组,下图我们将上面配置的8989
加入到某个安全组即可:
重新访问http://47.96.177.197:8989/index.html
成功:
这样就算部署成功了。
感谢阅读!欢迎关注系列专栏: 《小团队web技术搭建》