1、购买服务器
// 1、看什么看自己买服务器去
// 买完之后服务器开机
// 然后安装Xshell（网址：https://www.xshell.com/zh/free-for-home-school/）
// 安装好之后进入Xshell新建会话
// 名称随便取，主机为服务器的公网ip,连接输入用户名（root）密码(自己配置服务器的时候改一下)2、安装docker服务
// docker 概念
/* 1、docker是一个容器引擎(创建容器)，虚拟化技术的一种
2、虚拟化技术：虚拟机、K8S(硬盘、内存、服务)
3、容器(小型的linux系统)
4、举例
手机 ===> docker
app ===> 容器
软件安装包 ===> 镜像 */
// 1、卸载旧的版本（\是换行符，可以写成一行，注意每个docker之间有空格）
sudo yum remove docker \
docker-client \
docker-client-latest \
docker-common \
docker-latest \
docker-latest-logrotate \
docker-logrotate \
docker-engine
// 2、安装社区版Docker Engine-Community
// 在新主机上首次安装 Docker Engine-Community 之前，需要设置 Docker 仓库。
// 之后，您可以从仓库安装和更新 Docker。
// 安装所需的软件包。yum-utils 提供了 yum-config-manager，并且 device mapper
// 存储驱动程序需要 device-mapper-persistent-data 和 lvm2。
// 指令为：
sudo yum install -y yum-utils device-mapper-persistent-data lvm2
// 3、设置稳定仓库
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
// 4、安装最新版本docker: 过程中所有的提问都选：y
sudo yum install docker-ce docker-ce-cli containerd.io
// 5、安装指定版本docker
// 列出并排序您存储库中可用的版本。此示例按版本号（从高到低）对结果进行排序。
yum list docker-ce --showduplicates | sort -r
// 输出为：
docker-ce.x86_64 3:18.09.1-3.el7 docker-ce-stable
docker-ce.x86_64 3:18.09.0-3.el7 docker-ce-stable
docker-ce.x86_64 18.06.1.ce-3.el7 docker-ce-stable
docker-ce.x86_64 18.06.0.ce-3.el7 docker-ce-stable
// 通过其完整的软件包名称安装特定版本，该软件包名称是软件包名称（docker-ce）加上版本字
// 符串（第二列），从第一个冒号（:）一直到第一个连字符，并用连字符（-）分隔。
// 例如：docker-ce-18.09.1。
sudo yum install docker-ce-<VERSION_STRING> docker-ce-cli-<VERSION_STRING> containerd.io
// 6、启动docker
sudo systemctl start docker
// 7、验证docker: 通过运行 hello-world 映像来验证是否正确安装了 Docker Engine-Community
sudo docker run hello-world
// 如果提示：Unable to find image ‘hello-world:latest’ locally
// 不要慌多执行几次：
sudo systemctl start docker
sudo docker run hello-world
// 8、查看docker版本
docker --version
// 9、列出当前正在跑的docker镜像,也叫查看容器
docker ps
// 输出表头为
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
// 如果像关闭某一个镜像
docker stop <CONTAINER ID>
// 查看docker里有什么镜像
docker images3、基于docker安装nginx
// 1、先在docker仓库里查一下有哪些nginx镜像
docker search nginx
// 2、安装nginx
docker pull nginx
// 3、创建一个nginx镜像并跑起来
docker run -d -p 8080:80 --name nginx-8080 nginx
// 这里的-d指后台运行
// -p 端口号映射，冒号前是本机端口， 冒号后是容器端口，后面跟着镜像名字(nginx-8080)
// 后面追加nginx是你要开启的镜像的名称，那我们开启的不就是nginx这个镜像嘛
// 4、查看一下是否跑起来了这个镜像
docker ps
// 输出结果为
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
ca8048adfeac nginx "/docker-entrypoint.…" 2 minutes ago Up 2 minutes 0.0.0.0:8080->80/tcp, :::8080->80/tcp nginx-8080
// 5、查看所有的nginx镜像，包括跑起来的和没跑起来的
docker ps -a
// 输出结果为
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
ca8048adfeac nginx "/docker-entrypoint.…" 4 minutes ago Up 4 minutes 0.0.0.0:8080->80/tcp, :::8080->80/tcp nginx-8080
aa80dfc77d4b hello-world "/hello" 2 days ago Exited (0) 2 days ago bold_tharp
1f9bd668b3c6 hello-world "/hello" 2 days ago Exited (0) 2 days ago unruffled_edison
// 6、关闭nginx服务
docker stop nginx-8080
// 7、重新启动那个nginx服务
docker restart nginx-8080
// 8、再启动一个nginx镜像代理到8081端口
docker run -d -p 8081:80 --name nginx-8081 nginx
// 8、删除一个镜像
docker remove nginx-8081
// 至此 简单的docker安装nginx并启动算是成功了，接下来就会产生一个疑问，如果我想修改nginx的配置怎么办，
// 我想更改nginx中的资源文件怎么办？
// 接下来给出一个最实用的办法，就是将容器中的目录和本机目录做映射，以达到修改本机目录文件就影响到容器中的文件。
// 1、清个屏
clear
// 2、进入到home文件夹
cd home
// 3、创建一个文件夹
mkdir jjwu27-nginx
// 4、进入到jjwu27-nginx文件夹
cd jjwu27-nginx
// 5、创建一个nginx文件夹
mkdir nginx
// 6、进入nginx文件夹
cd nginx
// 7、创建两个新的文件夹
mkdir conf.d
mkdir html
// 8、在conf.d文件夹下新建default.conf文件，并进入
vi default.conf
i
// 9、退出文件（仅用于练习）
esc
:wq
// 10、进入文件里面
vi default.conf
i
// 11、复制以下内容进去
server {
listen 80;
server_name localhost;
# 原来的配置，匹配根路径
#location / {
# root /usr/share/nginx/html;
# index index.html index.htm;
#}
# 更该配置，匹配/路径，修改index.html的名字，用于区分该配置文件替换了容器中的配置文件
location / {
root /usr/share/nginx/html;
index index-test.html index.html;
}
}
// 简单解释，nginx默认会去找index.html文件，我们修改后，就会去找index-test.html文件
// 12、启动一个nginx镜像，映射路径
// 我们先把8080关了，重新起一个
nginx stop nginx-8080
// 查看一个文件所处的完整路径
realpath conf.d
// 输出为：/home/jjwu27-nginx/nginx/conf.d/conf.d
// 实际路径为：/home/jjwu27-nginx/nginx/conf.d
// 启动8080端口并完成文件映射
/* 命令比较长，其实就是多加了两个参数，-v，-v的意思就是冒号前面代表本机路径，冒号后面代表容器内的路径，两个路径进行了映射，本机路径中的文件会覆盖容器内的文件。
nginx容器内的一些文件位置，需要注意的是这些是容器内的文件，不是你本机的，所以你在本机的etc文件下是找不到nginx文件夹的
日志位置：/var/log/nginx/
配置文件位置：/etc/nginx/
项目位置：/usr/share/nginx/html */
docker run -d -p 8080:80 -v /home/jjwu27-nginx/nginx/conf.d:/etc/nginx/conf.d -v /home/jjwu27-nginx/nginx/html:/usr/share/nginx/html nginx
// 13、网页端访问路径：公网ip加上端口号
http://175.27.215.117:8080/
// 这个时候会报错说403 Forbidden
// 因为我们没有在/home/jjwu27-nginx/nginx路径下创建html文件呀
// 14、回到nginx文件夹，进入到html文件夹，在html文件夹下创建index.html文件
cd html
vi index.html
// 15、在index.html文件夹下复制以下内容
<html>
<body>
<h2>my name is jjwu27</h2>
</body>
</html>
// 16、我们发现还是不行，为什么呢，因为我们映射的是index-test.html文件呀
// 所以修改一下文件名称
mv index.html index-test.html
// 17、你会神奇的发现可以啦！！！！！！！！！！！！！！！！！！！！！4、nginx反向代理
// 此时静态页面网站已经部署上了，但是还是会显示一个端口8080出来，就十分不爽，
// 怎么把端口干掉后换成XXXXX.com/demo1 或者 XXXXX.com/demo2这种效果呢？
// 下面使用nginx的反向代理实现。
// 1、回到nginx目录，在nginx下创建文件夹conf.d2
mkdir conf.d2
// 2、在cong.d2文件夹下创建配置文件
cd conf.d2
vi default.conf
i
// 3、复制粘贴以下内容
// 注意注意！！！！！！！！！！！！
// 文本里的分号不能省略！！！！！！！！！！！！！！！！！！！！！！
server {
listen 80;
server_name localhost;
location /demo {
# 在该位置配置反向代理，将ip/demo1请求拦截，发送给8080端口，如果不是本机请使用公网ip
proxy_pass http://你的刚才的ip地址:8080/; //http://175.27.215.117:8080/;
}
}
// 4、再启动一个nginx(80)，专门作为反向代理映射，将本机80端口代理到nginx的80端口上，
// 并映射两端的配置文件地址。
docker run -d -p 80:80 -v /home/jjwu27-nginx/nginx/conf.d2:/etc/nginx/conf.d nginx
// 5、你会神奇的发现访问：http://175.27.215.117/demo
// 请求的页面是8080端口的页面
// 6、查看文件内容： cat default.conf5、负载均衡
// 负载均衡就是为了在大量请求的时候，可以把请求发到不同的服务器，减小压力
// 我们可以代理不同的服务器，然后做负载均衡，设置请求权重
//1、关闭8081的nginx服务
docker ps
docker stop nginx-8081
docker ps
// 2、实现负载均衡的效果，要再添加一个nginx，所以要增加一个文件夹。
// 进入nginx文件夹
mkdir html3
cd html3
// 3、创建index-test.html文件
vi index-test.html
i
// 4、复制以下内容
<html>
<body>
<h2>my name is other jjwu27</h2>
</body>
</html>
// 5、重新开启一个新的映射镜像
docker run -d -p 8081:80 -v /home/jjwu27-nginx/nginx/conf.d:/etc/nginx/conf.d -v /home/jjwu27-nginx/nginx/html3:/usr/share/nginx/html nginx
// 6、配置负载均衡，访问demo1时，平均分发到8080端口和8081端口上，
// 即my name is jjwu27和my name is other jjwu27间接出现。
//配置负载均衡，那就是配置在第二次的nginx上，就是反向代理的nginx上，
// 我们去conf.d2文件夹下，修改default.conf文件，如下：
// 7、修改刚才那个反向代理的配置文件内容为
// 清空文件内容的指令：echo "" > file.txt
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// 注意：一个字不能少，一个符号不能丢
upstream group1{
server 175.27.215.117:8080;
server 175.27.215.117:8081;
}
server {
listen 80;
server_name localhost;
location /demo1 {
proxy_pass http://group1/;
}
}
// 这个配置就是说我一个demo1可以访问两个服务器，这个时候我们只要把两个服务器的资源做成一样的
// 这样我们刷新的时候他会按照权重比来给我们非陪请求哪个，反正返回的资源都是一样的，这样可以
// 通过请求不同的服务器缓解压力
// 6、然后我们查看一下所有的镜像
docker ps -a
// 7、把刚才做代理的那个镜像重新启动一下就行了！！！！！
// 8、配置权重：修改default.conf的内容
upstream group1{
server 175.27.215.117:8080 weight=1;
server 175.27.215.117:8081 weight=10;
}
server {
listen 80;
server_name localhost;
location /demo1 {
proxy_pass http://group1/;
}
}
// 9、一样的重启一下代理配置的镜像就好了
6、本地创建Vue项目并上传到github
// 1、自己创建一个vue项目
// 2、在github上创建一个仓库
// 3、开始上传
// 4、在github上创建一个新的仓库
// 拿到仓库路径地址比如
// https://github.com/colinWu916/test.git
// 5、回到项目文件夹
git init
git add .
git commit -m "test"
git remote add origin https://github.com/colinWu916/test.git
git push -u origin master
// 如果不行多试几次7、服务器安装git拉取代码
// 1、查看是否安装了git
git verison
// 2、安装git
yum install -y git
// 3、git配置用户
git config --global user.name "jjwu27"
// 4、git配置用户邮箱
git config --global user.email "colinwu916@gmail.com"
// 5、生成公钥和私钥，输入命令后一路回车即可
ssh-keygen -t rsa -C "colinwu916@gmail.com"
// 输出为
// Generating public/private rsa key pair.
// Enter file in which to save the key (/root/.ssh/id_rsa):
// Enter passphrase (empty for no passphrase):
// Enter same passphrase again:
// Your identification has been saved in /root/.ssh/id_rsa.
// Your public key has been saved in /root/.ssh/id_rsa.pub.（注意这句话！！！）
// The key fingerprint is:
// SHA256:LXxBvDaREac/d+5UW7NPBMsbNdqFj2g3AoklBX5DVSk colinwu916@gmail.com
// The key's randomart image is:
// +---[RSA 3072]----+
// | o+B=o... |
// | . *++E .. |
// | o Bo .o.o|
// | . o+= oo*o|
// | S.o.*.Oo*|
// | o . = B*|
// | .o+|
// | +.|
// | o|
// +----[SHA256]-----+
// 6、进到这个文件里看到公钥并复制
cat /root/.ssh/id_rsa.pub
// 7、打开gitHub找到setting，然后点击SSH and GPG keys，点击New SSH key，把复制的公钥放进去，
// 取个名字就好
// 这里解释下为什么要这样，这就等于是给这个仓库加上你的公钥，也就是你能畅通无阻访问这个仓库
// 以及往仓库推送代码的钥匙
// 8、新建项目拉去代码
// 跑到根目录，创建一个jjwu27文件夹，然后在jjwu27文件夹里面创建一个jjwu_learning文件夹
// 进入到jjwu_learning文件夹，跑到gitHub的项目仓库，点击Code复制SSH码的地址
// 回到jjwu_learning文件夹输入
git clone git@github.com:colinWu916/jjwu_learning.git
// 过程中遇到的问题一律输入yes
// 然后你就会发现项目已经拉进来啦8、服务器安装nodejs环境并编译代码
// 1、查看node当前最新版本
// https://nodejs.org/en/download/
// 2、安装最新的nodejs
// 先进入到home文件夹下
wget https://nodejs.org/dist/v20.9.0/node-v20.9.0-linux-x64.tar.xz
// 3、解压压缩包
tar -xvf node-v20.9.0-linux-x64.tar.xz
// 在当前文件夹下ls -l查看所有文件，输出为
drwxr-xr-x 3 root root 4096 Nov 11 11:00 jjwu27-nginx
drwxr-xr-x 6 1000 1000 4096 Oct 24 10:51 node-v20.9.0-linux-x64
-rw-r--r-- 1 root root 25205000 Oct 24 10:53 node-v20.9.0-linux-x64.tar.xz
// 删除压缩包
rm -rf node-v20.9.0-linux-x64.tar.xz
// 进入到node-v20.9.0-linux-x64文件夹，找到bin文件夹，进入bin文件夹
// 4、部署bin文件
// 先确认你nodejs的路径，我这里的路径为/home/node-v20.9.0-linux-x64/bin
// ls -l我们可以查看到里面有node文件和npm文件，我们把这两个文件做个映射
// 推到home文件夹并执行
ln -s /home/node-v20.9.0-linux-x64/bin/node /usr/bin/node
ln -s /home/node-v20.9.0-linux-x64/bin/npm /usr/bin/npm
// 注意ln指令用于创建关联（类似与Windows的快捷方式）必须给全路径，否则可能关联错误。
// 5、查看是否安装成功
node -v
npm -v
// 6、安装yarn
npm install yarn -g
// 你会发现bin文件夹下多了一个yarn文件，开始映射
ln -s /home/node-v20.9.0-linux-x64/bin/yarn /usr/bin/yarn
// 如果不做映射的话我们用yarn命令只能进入到yarn文件夹里用，配置后可以全局用
// 查看yarn的版本
yarn -v
// 7、安装项目依赖
// 进入到文件夹：cd /jjwu27/jjwu_learning/jjwu_learning
// 安装依赖：yarn
// 安装完之后我们发现会多一个node_modules文件夹
// 8、启动项目跑一下试试
yarn serve
// 报错了，提示说没有装less,我们装一下less
yarn add less
// 再启动，成功啦！！！！！！！！！！！！！！！
// App running at:
// - Local: http://localhost:8082/
// - Network: http://10.206.0.11:8082/
// Note that the development build is not optimized.
// To create a production build, run yarn build.
// 注意是8082端口哦，因为8080和8081刚才都被我们占用了呀
// 9、打包项目
yarn build
// 检查打包后的静态文件
ls -l
// 发现多了一个dist文件夹，可以进去看下打包好的文件
cd dist
ls -l9、整理一下
1、我的vue项目在哪个文件夹
/jjwu27/jjwu_learning/jjwu_learning
2、我的nginx在哪个文件夹
/home/jjwu27-nginx
3、我的ndoejs在哪个文件夹下
/home/node-v20.9.0-linux-x6410、部署静态文件
// 1、先把原来启动的8080端口的docker容器停止掉
docker ps
docker stop <id>
// 2、重新运行docker的nginx容器
// 警告！此时你一定要在项目的根目录中哦，不然的话也可以根据你目前的目录简单调整启动命令。
// 注意是跑到项目的根目录哈，项目的根目录也就是: /jjwu27/jjwu_learning/jjwu_learning
// 执行命令
docker run -d -p 8080:80 -v $PWD/dist:/usr/share/nginx/html nginx
// $PWD是指的当前路径，上面的警告的意思是启动命令已经规定了是当前项目根目录下的dist
// 文件夹($PWD/dist)，如果不在项目根目录，会出现一些问题。
// 3、插入一个语法：echo是输出命令
echo $PWD // 查看当前完整路径
// 4、镜像启动后，你会发现卧槽可以了！！！！！！！！！！
// 去8080端口看我靠真的出来了11、增加前端启动命令，简化流程
// 1、修改本地vue文件，commit到gitHub上
// 这里在git push的时候遇到了几个报错
// Failed to connect to github.com port 443: Timed out
// OpenSSL SSL_read: Connection was reset, errno 10054
// 换换VPN的代理节点多试试git push就好
// 2、回到服务器，进入到项目的根目录
git pull
// 拉完之后重新build
yarn build
// 3、总结一下改东西，我们需要不断的重复刚才的步骤
// 并且在实际项目中还需要插入其他的脚本指令
// 4、那怎么更好的简化一点点呢
// 在项目的根目录下加一个文件：start.sh
// start.sh是linux系统下的脚本文件
// 文件下内容为
git pull
yarn --registry=https://registry.npm.taobao.org/ && yarn build
#删除容器
docker rm -f jjwu27_1 &> /dev/null
#启动容器
docker run -d --restart=on-failure:5\
-p 8080:80 \
-v $PWD/dist:/usr/share/nginx/html \
--name jjwu27_1 nginx
// 5、提交到gitHub上
git add .
git commit -m '修改脚本文件'
git push
// 6、回到服务器项目根目录文件夹
git pull
// 发现多了start.sh文件
// 我们把之前的8080端口给它关掉
docker ps
docker stop <id>
// 然后我们运行脚本文件即可
sh start.sh
// 这里你通过查看输出记录就知道它在按照你的
// 脚本文件一步一步的往下执行
// 7、我们去看下网址发现项目已经启动了
// 8、这个时候我想改个东西怎么搞
// 直接改文件
// 改完后提交
git add .
git commit -m '需求1'
git push
// 9、回到服务器只执行
sh start.sh
// 我们回到项目地址发现项目更新了12、Nginx反向代理丢失js、css问题
// 首先注意前提！！！！！！！！！！！！！！！！！！
// 是反向代理！！！！！！！！！！！！！！！
// 1、操作步骤
// 回到nginx配置目录
// 进入到之前做反向代理的文件里面（conf.d2/default.conf）
vi default.conf
// 复制以下内容，其实我们就是关了负载均衡
upstream group1{
server 175.27.215.117:8080;
#server 175.27.215.117:8081;
}
server {
listen 80;
server_name localhost;
location /demo1 {
proxy_pass http://group1/;
}
}
// 修改好后，我们重启一下反向代理的镜像
docker restart <id>
// 然后我们发现demo这个反向代理网址可以访问了，之前是不行的，之前访问的时候还是以前的页面
// 但是虽然可以访问了，但是我们发现接口都报错了
// 查看路径都是
GET http://175.27.215.117/js/app.131a064a.js net::ERR_ABORTED 404 (Not Found)
GET http://175.27.215.117/css/chunk-vendors.10dd4e95.css net::ERR_ABORTED 404 (Not Found)
GET http://175.27.215.117/js/chunk-vendors.98e38eb9.js net::ERR_ABORTED 404 (Not Found)
GET http://175.27.215.117/css/app.089dc55a.css net::ERR_ABORTED 404 (Not Found)
// 2、资源丢失是因为接口请求错误了
// 我们看下接口发现请求js或者css资源的地址都是从根目录下去找的，这是有问题的
// 3、问题是出在vue打包的时候
// 我们在本地打包看一下啊
// 打包完之后我们进入dist文件夹下的index.html，他是这样的
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="/favicon.ico">
<title>jjwu27_1</title>
// 下面的这种路径都叫根目录直接 / 加 路径
<script defer="defer" src="/js/chunk-vendors.2abaa773.js"></script>
<script defer="defer" src="/js/app.afb755c7.js"></script>
<link href="/css/chunk-vendors.10dd4e95.css" rel="stylesheet">
<link href="/css/app.2b25d90a.css" rel="stylesheet">
</head>
<body>
<noscript>
<strong>We're sorry but jjwu27_1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html>
// 我想你应该发现了，我们访问代理网址的时候，资源路径是根目录，也就是我们本地的目录
// 但其实我们应该去打包好后的本目录下拿资源
// 怎么改呢，进入项目的vue.config.js文件夹
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
publicPath: './' // 加一行这个就可以了 =>>>> ./代表本目录
})
// 4、重新打包，我们会发现，index.html文件里面的内容路径都变成了 =>>>>> ./
// 不知道是不是版本问题，我发现我这里和和视频不一样
// 5、我们把dist文件夹删除，只保留vue.config.js的修改然后提交到github
// 6、回到服务器项目文件夹
sh start.sh
// 你会发现好啦！！！！！！！！！！！！！
