Nginx、Git、Gitee的介绍及使用

目录

1、项目启动思路

2、Nginx

一、下载Nginx

1、下载地址

2、选择下载稳定版本

 3、解压安装包

二、Nginx的原理

 1、原理图

2、流程分析

三、配置Nginx

1、第一步:解决各种js报错

2、第二步:配置Nginx

3、启动/停止/重启Nginx

4、访问网址

5、自定义端口

四、Git

1、基本介绍

2、git的安装

3、代码推送流程

五、基于Gitee的使用

1、新建仓库

2、文件介绍

3、克隆

4、提交代码【手把手教学】

5、快速切换分支

6、提交代码冲突处理


回顾前面文章所学

1、项目启动思路

脚手架启动服务,webpack打包项目,部署到服务器上,通过本机地址启动项目

(1)webpack启动项目缺点:下载各种配置文件,容易出现版本冲突

(2)打包项目:npm run build,项目文件夹下出现dist文件夹,用其部署到服务器上

2、Nginx

把自己电脑当作一台服务器,进行部署,不用打包,即可启动项目


一、下载Nginx

1、下载地址

nginx: downloadicon-default.png?t=N7T8https://nginx.org/en/download.html

2、选择下载稳定版本

Nginx、Git、Gitee的介绍及使用_第1张图片

 3、解压安装包


二、Nginx的原理

 1、原理图

Nginx、Git、Gitee的介绍及使用_第2张图片

2、流程分析

(1)客户端:输入一个网址

            http请求【找到网络,域名等等】

(2)解析IP地址,寻找服务器主机

            网络链路层

(3)服务端服务器【找到对应的服务器(一台没有显示器的主机,存放文件,文件有各自的路径,即端口号后面的内容,eg:8080/后面就是文件在服务器上的地址)】

            

(4)服务器内部:Nginx会去请求映射配置,接口映射【http://127.0.0.1:7001本机地址:端口号】、文件映射【D:/Users/22972/train/three-two/nigix-try/dist】=》形成程序、文件

            http响应

(5)回到初始客户端


三、配置Nginx

1、第一步:解决各种js报错

(1)打开项目中vue.config.js文件=》添加publicPath:'./'

Nginx、Git、Gitee的介绍及使用_第3张图片

(2)重新打包,终端npm run build

2、第二步:配置Nginx

(1)打开解压后的nginx文件夹=》找到conf文件夹=》用VSCode打开nginx.conf文件

Nginx、Git、Gitee的介绍及使用_第4张图片Nginx、Git、Gitee的介绍及使用_第5张图片 Nginx、Git、Gitee的介绍及使用_第6张图片

(2)在server中找到location

 Nginx、Git、Gitee的介绍及使用_第7张图片

 (3)根据上面location的配置,可以自定义配置自己的项目

location /student_system {
    alias  D:/Users/train/nigix-try/dist/;
    index  index.html index.htm;
}

①location后的:表示要匹配地址的path【通常为项目名】

②alias后的字符串,表示要映射的文件夹【dist文件夹所在路径】

③index后的字符串,表示要映射的默认文件,直接复制无需更改【index.htm很早之前html是没有l的,适应旧版】

注意:每次修改nginx.conf文件后,都必须重启nginx

3、启动/停止/重启Nginx

(1)启动Nginx

①方法一:打开解压后的nginx文件夹=》双击nginx.exe

Nginx、Git、Gitee的介绍及使用_第8张图片

②方法二:win+R,cmd进入nginx根文件夹【有nginx.exe文件夹下】输入启动命令.\nginx.exe

③注意:每次启动前,先使用停止命令,防止启动多个nginx导致异常

④检验是否成功打开的两种方式:

  • 打开网页输入每个电脑默认本机地址127.0.0.1,查看Nginx是否成功开启
  • 在【任务管理器 => 进程】中查看是否有nginx程序

Nginx、Git、Gitee的介绍及使用_第9张图片

(2)停止nginx

①方法一:任务管理器,关闭任务

②方法二:win+R,cmd进入nginx根文件夹【有nginx.exe文件夹下】输入停止命令.\nginx.exe -s stop

(3)重启nginx

win+R,cmd进入nginx根文件夹【有nginx.exe文件夹下】输入停止命令.\nginx.exe -s reload

4、访问网址

(1)输入前面配置好的路径地址,进入网页

(2)代码例子

如下的配置,在网址中输入localhost/wangyiyun即可

location /wangyiyun {
    alias F:/Desktop/wangyiyun/dist/;
    index index.html index.htm;
}

5、自定义端口

(1)说明

nginx.conf文件【http】的【server】里前两行 listen(端口号)默认为80,server_name(域名/ip)默认为localhost(127.0.0.1)

如有需求,可以自行更改listen(端口号)的值

注意

  • 一般情况无需更改,使用默认值即可
  • 由于本地电脑没有配置域名,所以一般情况不更改server_name
  • listen(端口号)不能设置为已被电脑其他程序占用的端口号

(2)端口号配置

①cmd=》netstat -an查已经开启的端口号
②修改端口号【注意!!!改的端口未被占用】
找到server下的listen改为88,后重启nginx
③访问网址变为:127.0.0.1:88/system-try


四、Git

1、基本介绍

(1)Git 是一个免费的开源分布式版本控制系统,旨在处理从小到小到的所有内容具有速度和效率的超大型项目。主要用于团队开发,管理、合并成员的代码,并且能够控制代码版本,是团队项目必用工具之一

(2)目前比较主流的基于 Git 搭建的 Git 平台有:Github、Gitee、Gitlab(主要用于企业内部搭建Git )等

2、git的安装

(1)下载稳定版本的【Windows】版本,下载完毕后进行安装

(2)下载地址:Git - Downloading Package

Nginx、Git、Gitee的介绍及使用_第10张图片

(3)安装完成后,打开终端【cmd】,输入以下命令,输出版本号即安装成功

git --version

3、代码推送流程

(1)pull(拉取)

(2)merge(合并)

(3)stash(暂存)

(4)commit(提交)

(5)push(推送)


五、基于Gitee的使用

账号的注册小编就不操作了,接下来利用学生管理系统项目做为模拟例子

1、新建仓库

(1)仓库名称:student-system

Nginx、Git、Gitee的介绍及使用_第11张图片

(2)仓库介绍:学生管理系统

Nginx、Git、Gitee的介绍及使用_第12张图片

(3)选择:私有(仅仓库成员可见)

Nginx、Git、Gitee的介绍及使用_第13张图片

(4)初始化仓库:选择语言【NodeJS】=》添加 .gitignore【Node】=》添加开源许可证【不选】

(5)设置模板:Readme文件

 (6)选择分支模型:单分支

Nginx、Git、Gitee的介绍及使用_第14张图片

 (7)点击创建

2、文件介绍

(1).gitignore文件:查看忽视掉的配置文件

例如:有node_modules/依赖包,默认不上传到平台上

(2)README.md文件:项目的说明

Nginx、Git、Gitee的介绍及使用_第15张图片

3、克隆

(1)目的:将平台代码下载到本地

(2)使用步骤

①在创建好的仓库下,点击克隆/下载,并复制

Nginx、Git、Gitee的介绍及使用_第16张图片

②在任意工程【2023-7-12-try文件夹】右键,通过Git Bash Here打开

Nginx、Git、Gitee的介绍及使用_第17张图片

③输入git clone 克隆网址

Nginx、Git、Gitee的介绍及使用_第18张图片

④此时【2023-7-12-try文件夹】会产生文件student-system

Nginx、Git、Gitee的介绍及使用_第19张图片

 ⑤将产生的.git文件夹复制到自己的代码工程下,做替换

Nginx、Git、Gitee的介绍及使用_第20张图片

 ⑥然后用VSCode打开代码工程,就有管理git整个页面内容,即克隆完成

Nginx、Git、Gitee的介绍及使用_第21张图片

4、提交代码【手把手教学】

(1)在更改的右边点+【出现暂存的更改】

Nginx、Git、Gitee的介绍及使用_第22张图片

(2)输入框输入:第一次提交

这里输入一般写具体修改了什么内容,以便提示其他人你本次提交上去的代码改动了什么

Nginx、Git、Gitee的介绍及使用_第23张图片

(3)点击提交【提交到电脑的.git下】

如果出现以下弹框,可以直接选择是

Nginx、Git、Gitee的介绍及使用_第24张图片

(4)点击同步更改

Nginx、Git、Gitee的介绍及使用_第25张图片

(5)回到网页gitee查看仓库的变化

会发现,如果代码有依赖包,dist文件,均不会被上传【同文章前面第2点的文件介绍】

5、快速切换分支

点击左下角的分支【有本地分支master,远程分支...】

Nginx、Git、Gitee的介绍及使用_第26张图片

6、提交代码冲突处理

小编模拟了一个与别人提交的代码发生冲突的情况

(1)点击提交

Nginx、Git、Gitee的介绍及使用_第27张图片

(2)发现冲突

Nginx、Git、Gitee的介绍及使用_第28张图片

(3)确定采用的修改情况

这时候需要同其他人讨论,采用代码情况,自行选择

①采用当前更改:即采用我的修改

②采用传入的更改:即采用其他人的修改

③保留双方更改:即我和其他人的修改都会被保留

Nginx、Git、Gitee的介绍及使用_第29张图片

此处小编选择了采用当前更改

(4)选择完,要点击+,进行暂存更改

Nginx、Git、Gitee的介绍及使用_第30张图片

(5)同步更改

Nginx、Git、Gitee的介绍及使用_第31张图片

你可能感兴趣的:(vue2,nginx,gitee,git,学习,笔记)