《小团队web技术搭建》(五)项目的简单部署方式

简介: 《小团队web技术搭建》(五)项目的简单部署方式
欢迎关注系列专栏《小团队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来拉取代码的话。

连接服务器

连接远程服务器你需要一个连接工具,比如:MobaXtermIIS7SecureCRT(付费)等等。我比较喜欢用的是MobaXterm,并且用它来做演示。

  1. 新建一个连接会话,按图示顺序设置完成:

image.png

  1. 双击刚才新建好的会话,输入密码连接即可完成:

image.png

首先我们要做的是想办法上传代码到服务器。

方式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

image.png

生成ssh key:

ssh-keygen -t rsa -C "your_email"

image.png

显示出来public key,然后复制它:

cat ~/.ssh/id_rsa.pub

image.png

把key粘贴到git托管平台:

image.png

把复制的key粘贴到Key一栏,Title填写一个你能知道是来自哪台机子的名字:

image.png

再次进行git clone:

image.png

至此我们的代码就算同步到服务器了,当以后有代码更新时就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图标,选择一个目录上传(在此之前我们压缩下项目包,因为不支持上传文件夹):
image.png

现在代码的压缩包已经上传了:
image.png

解压:

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

image.png

但公网地址http://47.96.177.197:8989/index.html是不通的:

image.png
你可能需要检查下防火墙:

# iptables
iptables -L

# ufw
ufw status

# firewalld
firewall-cmd --list-all

以及看看服务器云厂商的端口放行,比如阿里云的添加安全组,下图我们将上面配置的8989加入到某个安全组即可:

image.png

重新访问http://47.96.177.197:8989/index.html成功:

image.png

这样就算部署成功了。

感谢阅读!欢迎关注系列专栏《小团队web技术搭建》
相关文章
|
1月前
|
存储 安全 关系型数据库
后端技术:构建高效稳定的现代Web应用
【10月更文挑战第5天】后端技术:构建高效稳定的现代Web应用
53 1
|
1月前
|
缓存 前端开发 JavaScript
前端技术探索:构建高效、响应式Web应用的秘诀
前端技术探索:构建高效、响应式Web应用的秘诀
58 0
|
12天前
|
JavaScript 前端开发 开发工具
web项目规范配置(husky、eslint、lint-staged、commit)
通过上述配置,可以确保在Web项目开发过程中自动进行代码质量检查和规范化提交。Husky、ESLint、lint-staged和Commitlint共同作用,使得每次提交代码之前都会自动检查代码风格和语法问题,防止不符合规范的代码进入代码库。这不仅提高了代码质量,还保证了团队协作中的一致性。希望这些配置指南能帮助你建立高效的开发流程。
30 5
|
13天前
|
SQL 负载均衡 安全
安全至上:Web应用防火墙技术深度剖析与实战
【10月更文挑战第29天】在数字化时代,Web应用防火墙(WAF)成为保护Web应用免受攻击的关键技术。本文深入解析WAF的工作原理和核心组件,如Envoy和Coraza,并提供实战指南,涵盖动态加载规则、集成威胁情报、高可用性配置等内容,帮助开发者和安全专家构建更安全的Web环境。
33 1
|
17天前
|
负载均衡 监控 算法
论负载均衡技术在Web系统中的应用
【11月更文挑战第4天】在当今高并发的互联网环境中,负载均衡技术已经成为提升Web系统性能不可或缺的一环。通过有效地将请求分发到多个服务器上,负载均衡不仅能够提高系统的响应速度和处理能力,还能增强系统的可扩展性和稳定性。本文将结合我参与的一个实际软件项目,从项目概述、负载均衡算法原理以及实际应用三个方面,深入探讨负载均衡技术在Web系统中的应用。
48 2
|
1月前
|
安全 网络协议 算法
HTTPS网络通信协议揭秘:WEB网站安全的关键技术
HTTPS网络通信协议揭秘:WEB网站安全的关键技术
152 4
HTTPS网络通信协议揭秘:WEB网站安全的关键技术
|
19天前
|
JavaScript 前端开发 数据安全/隐私保护
Web开发者必看:手把手教你如何轻松播放m3u8流地址,解锁视频播放新技能,让你的项目更上一层楼!
【10月更文挑战第23天】随着互联网技术的发展,m3u8格式因良好的兼容性和高压缩率被广泛用于网络流媒体传输。本文介绍如何在Web端播放m3u8流地址,包括引入视频播放器(如Video.js)、创建播放器容器、初始化播放器及播放m3u8流的具体步骤。此外,还涉及处理加密m3u8流的示例。
68 1
|
27天前
|
JSON 搜索推荐 API
Python的web框架有哪些?小项目比较推荐哪个?
【10月更文挑战第15天】Python的web框架有哪些?小项目比较推荐哪个?
45 1
|
27天前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
29天前
|
存储 安全 数据库
后端技术在现代Web开发中的实践与创新
【10月更文挑战第13天】 本文将深入探讨后端技术在现代Web开发中的重要性,通过实际案例分析展示如何利用先进的后端技术提升用户体验和系统性能。我们将从基础架构设计、数据库优化、安全性保障等方面展开讨论,为读者提供清晰的指导和实用的技巧。无论是新手开发者还是经验丰富的技术人员,都能从中获得启发和帮助。
33 2