用户中心（上线）

项目部署上线

Docker 部署

查看之前构建好的镜像（删除镜像 docker rmi -f 镜像ID，通过 docker images 可以查看镜像ID）

[root@VM-8-12-centos user-center-frontend]# docker images
REPOSITORY             TAG                IMAGE ID       CREATED         SIZE
user-center-frontend   v0.0.1             d2642df3a09b   6 seconds ago   191MB
user-center-backend    v0.0.1             773d6f343c0b   7 minutes ago   214MB
nginx                  latest             2ac752d7aeb1   2 days ago      188MB
maven                  3.5-jdk-8-alpine   fb4bb0d89941   5 years ago     119MB

停掉宝塔前、后端项目，省得占用端口
docker run 启动前/后端项目镜像
:::warning
🏮 虚拟化
1端口映射：把本机的资源（实际访问地址）和容器内部的资源（应用启动端口）进行关联
2目录映射：把本机的端口和容器应用的端口进行关联
:::
启动前端镜像

//前端(没有权限用sudo) -d以后台的方试运行
~>> docker run -p 80:80 -d user-center-frontend:v0.0.1

还记得吗？我们刚刚访问的时候，他它是不是给了一个提示，说抱歉！该站点已经被管理员停止运行，请联系管理员了解详情！ 实际上，咱们只是关了咱们要启动的网站，但是这个nginx服务器，它还是占用了80端口，所以我们还要把nginx也关了

再次启动前端镜像 , 用netstat -ntlp查看是否启动成功 , 80端口正在监听 , 启动成功

查看日志

//查看进程(可以查看已经启动的容器ID，没有权限用sudo)
//容器ID不是固定的，不要盲目复制命令哦
~>> docker ps

//查看日志		docker logs 容器ID
//这些都是咱们的访问记录,可以看到哪个用户,哪个IP,在什么时间访问了你的网页的哪些文件
~>> docker logs b9d50074a1f1

这样看日志有点麻烦，我们可以让日志持续不断的输出

//-f跟踪日志输出(没有权限用sudo)
~>> docker logs 容器ID -f
docker logs b9d50074a1f1 -f

//ctrl+c退出 杀死掉这个容器  docker kill 容器ID
~>> docker kill b9d50074a1f1
#b9d50074a1f1

//查看进程,没有在启动的容器了
~>> docker ps

启动后端镜像

//后端(没有权限用sudo)
~>> docker run -p 8080:8080 user-center-backend:v0.0.1

这里没有后台启动

访问 公网IP+8080端口 即可，同样是404，因为是后端；访问接口 公网IP+8080/api/user/search 之类的就可以了

容器平台

🪔 现在我们已经学会了使用docker容器去部署项目，但是，有一个问题，每次都得自己去输入命令，有点麻烦，再想一种简单的方式，那就是我们不用买服务器，蹭别人的容器平台，相当于别人给我们提供了服务器、宝塔、Linux之类的容器管理页面，我们只需要把docker容器构建好，然后交给他们去运行就好了。

1. 云服务商的容器平台：腾讯云、阿里云等等
2. 面向某个领域的容器平台：前端、后端 微信云托管等等。不过要花钱
   1. 微信云托管

好处：

1. 不用输命令来操作，更方便
2. 不用在控制台操作，更简单
3. 大厂提供，比自己运维更省心
4. 额外的能力，比如监控、报警、存储、负载均衡、自动扩缩容、流水线
   这里看直播就好

前端部署方式

前端 webify

1. 前端腾讯云 web 应用托管

优点：比容器化更简单，不需要自己写构建应用的命令，就能启动前端项目
缺点：需要就爱那个代码放到代码托管平台上
这里看直播就好

域名

视频讲解介绍包括购买域名科普视频：网站部署上线必看 (来自球友box的推荐)
本次讲解来源于此视频及腾讯云文档整理所得🐶

1. 域名的简单介绍

🧐在 Internet 上有千百万台主机，为了区分这些主机，每一台主机都被分配一个 IP 地址。但由于 IP 地址没有实际意义难于记忆，于是就有了域名（Domain Name）。而获得域名的方式是通过付费获得域名一年或多年内的使用权，我们称之为域名注册。
DNS，即 Domain Name System，域名系统。DNS 是一整套从域名映射到 IP 的系统。
TCP/IP 中使用 IP 地址来确定网络上的一台主机，但是 IP 地址不方便记忆，且不能表达地址组织信息，于是人们发明了域名，并通过域名系统来映射域名和IP地址。

域名对于大部分的人来说就是网站的网址，每个域名背后都对应一个服务器的IP地址，虽然每次访问网站都要输入域名，但其实都是通过访问这个域名对应的IP地址的网站服务器来打开的。🦥
不相信？有个简单的方法可以查到每个域名背后对应的IP地址，MAC电脑打开终端，输入：ping www.bilibili.com 回车，就能看到这个网站的服务器IP地址了 👻

Windows电脑，打开命令提示符工具cmd，输入：ping www.bilibili.com 回车

💡 直接用IP地址访问来访问某网站的服务器，也是能打开这个网站的，这是访问网站的古老方式，到目前为止，有些网站还是鞥通过在浏览器中直接输入服务器的IP地址来进行访问，比如：百度 180.101.49.12，但是很多大型网站出于安全和技术的原因，现在已经不让直接通过IP地址来访问了。

域名的出现，其实是为了方便记忆，同样是百度，你是愿意记www.baidu.com还是180.101.49.12这一串数字呢？

上网要访问服务器，要知道服务器的IP地址，IP地址是一串数字，虽然已经使用点分十进制已经清洗不少了，但仍不方便记忆。使用单词来代替IP地址，比如 baidu、sogou、taobao 这样的，这样的单词就是“域名”。
域名是一个字符串，如 www.baidu.com ，hr.nowcoder.com
域名系统为一个树形结构的系统，包含多个根节点。其中：

1. 根节点即为根域名服务器，最早IPv4的根域名服务器全球只有13台，IPv6 在此基础上扩充了数量。
2. 子节点主要由各级DNS服务器，或 DNS 缓存构成。

●DNS域名服务器，即提供域名转换为 IP 地址的服务器。

●浏览器、主机系统、路由器中都保存有DNS缓存。
●Windows系统的DNS缓存在 C:\Windows\System32\drivers\etc\hosts 文件中，Mac/Linux系统的DNS缓存在 /etc/hosts 文件中。

实践中为了保证域名的唯一性，域名往往是分级的。

www.sogou.com从前往后分别是三级、二级、一级
.com公司 .cn中国 .edu教育组织

最早的域名解析系统，是一个文件。（hosts 文件）
每个域名都会对应到一个 IP 地址
一旦新的网站出现了，或者旧的网站下线，这里就需要修改
全世界有很多网站不停的新增和消亡全世界又有这么多的主机上带有 hosts 需要修改
全世界，这么多的主机都在上网，此时 DNS 服务器如何承担这么高的并发量？
两个原则：开源，节流

1. 全世界会搭建出很多的“DNS 镜像服务器”（一般是网络运营商 或者 一些大厂）
2. 每个电脑上，在进行域名解析的时候，都会有缓存。我访问 10 次搜狗，只有第一次真的访问 DNS，后面 9 次都不一定访问

2. 购买域名

这部分强烈建议观看 星球大佬 炎 制作的笔记，特别特别详细

:::success
🪔 其实准确来说是租的，一般来说，每个人都要去域名注册商那里去购买自己喜欢的域名，域名都是以年为时间为单位来购买，和租的差不多，同时域名也支持转手卖，因为域名有唯一性。
国内一般买域名就是阿里云和腾讯云，国外买域名的网站有很多，流程都很相似。
:::
在国内，域名注册必须经历四个步骤 🚨

这里以腾讯云作为演示，打开腾讯云 -> 产品 -> 域名注册

一般一级域名的命名，不是所有字符都可以用，只有三类字符是允许的

| 1️⃣ 26个英文字母

|
| — |
| 2️⃣ 0-9这十个数字

|
| 3️⃣ - 这个文件连字符 |

大部分人都是用纯英文或者单词拼写简写这样组合的方式，因为更容易记忆，比如输入helloweb.com，就会看到所有相关的域名信息、其他顶级域名下的一级域名，不同的顶级域名价格都是不一样的，域名一次最多买十年(租十年)。
在现实生活中，很多域名都是按自己或者企业的个人喜好来使用的，域名的分类只是一个分类，并不代表一定要按它的分类或者含义来使用，你想怎么用，完全取决于你自己。 (～o￣▽￣)～o ~。。。

:::danger
👨🏻‍💻小知识：
就像IO(Indian Ocean)这个域名，它本身的意义是英国英属印度洋领地在互联网域名系统中拥有的国家及地区的顶级域名；
但是由于在计算机科学领域，IO常被作为IO(Input Output) 输入和输出的缩写，使得IO这个域名很适合与技术相关的服务(使用)；
IO域名也可以作为Internet Organization，也就是互联网组织的缩写，因此该顶级域名也十分受初创公司和IT公司的欢迎，经常被用作开源项目的网站或API、一些在线的服务(网站)使用。
:::

❗ 如果在域名查找列表里要选择买域名的时候，有些域名会注明不能备案，就不用考虑了；
如果注明是某个地区，不能备案，就要看自己的情况，个人的话，根据你的身份证所在的那个省备案；公司的话，就是公司注册地为准。
你会发现有些顶级域名， 腾讯云或其他国内的域名注册商那里没有，比如IO顶级域名，可以去国外的域名注册商那里看一下，但是一般这样的域名没有办法通过国内的备案，会影响在国内的使用。

点击域名价格，可以筛选便宜的域名，然后点击表格操作下的立即注册
添加到购物车后购买，会先提示你要实名认证之类的
实名认证之后购买你就可以在控制台看到你购买的域名了
购买后的域名要进行备案，正规的云服务器提供商都有备案服务，只有备案的域名，才能被正常的 DNS
解析，才能正常得被访问
备案流程会比较麻烦，腾讯云可以通过小程序备案
备案大概流程：

1. 服务器的提供商的备案系统里填写资料后提交
2. 腾讯云的备案人员审核资料，有问题会打电话联系你修改
3. 资料正确无误后，腾讯云会提交到相应的备案管理部门
4. 等待备案管理部分审核

🪔 备案是我们国内对网络(网站)进行管理的一种机制，就是向有关部门提交域名使用的人员或公司的实名信息，比如说这个域名主要用来做什么的、负责人的联系方式是什么等等，只有备案的域名，才能被正常的DNS解析(才能被正常访问)。如果你的域名使用的DNS解析服务器是国外的，那也可以不备案 🤪
当然不建议这么做，因为毕竟备案了以后，会少很多的麻烦，在国内很多网络服务，如果要使用域名，都会要求该域名已经备案，网站就更不用说了ㄟ( ▔, ▔ )ㄏ

❗ 每个省都有自己的备案管理机构，一般来说你的身份证地址或公司的注册地址在哪个省，就会提交到哪个省管局去备案，每个省或直辖市的省管局规则有些不太一样，个人备案和公司备案也有不同的要求

3. 绑定域名

:::info
前端项目访问：用户输入地址 => 域名解析服务器（把网址解析为 IP 地址 / 交给其他的域名解析服务）=> nginx 接收请求，找到对应的文件，返回文件给前端 => 前端加载文件到浏览器中（js、css）=> 渲染页面
后端项目访问：用户输入地址 => 域名解析服务器 => 服务器 => 后端项目（8080 端口）
:::

前端绑定域名

在控制台查看域名，点击 解析

点进去后有个 添加记录，点击

此时访问一下 user.域名 会显示 404，因为我们这里用的是宝塔 Linux，指定的前端项目是用 IP 地址访问的，因此这里要修改一下，添加一下域名
原本 nginx 只认 ip 不认域名，这里添加完成后 nginx 就会在配置文件中添加这个域名

然后重新访问就可以了

如果你还没去备案，会提醒你去的

后端绑定域名

再去添加记录 然后点击保存

这里以yupi666.com 作为域名演示
访问一下user-backend.yupi666.com:8080 和 user-backend.yupi666.com:8080/api/user/search

这样很丑，难道每次我们都要让用户加个端口去访问吗?虽然说用户不可能直接调后端，但是对于开发者来说，其实加个端口号也不是那么舒服ㄟ( ▔, ▔ )ㄏ 能不能把这个端口号去掉？

:::success
去掉端口号，他是不是默认就访问的是80端口，80端口的请求就发到nginx，我们是不是可以让nginx接收到请求，然后再帮我们把请求转发到后端项目，可以做一个转发，转发到8080端口
:::
配置一下，去新建一个站点，然后点击新站点的设置
我们让nginx来转发请求，甚至你不光能做转发，还能做改写请求去做拦截等等

点击添加反向代理

nginx 反向代理：替服务器接收请求，转发请求
写一下代理名称和目标URL，然后点击提交

访问一下，不带端口号，成功了🥳

nginx反向代理是非常常用的一个方法。可以帮我们统一的管理请求、接收请求，我们只需要去配置访问
哪个域名、转发到哪个地址、转发到哪个项目，或者说访问哪个域名、访问哪个目录的文件，只要配置这
些就可以了(～￣▽￣)～

试着去登录时，发现跨域了，为什么跨越了？(借张🐟的图)

附加：使用宝塔面板安装mysql

之前从0搭建了mysql，后面换了系统，得重新搭一次，这次就用宝塔试一下ㄟ( ▔, ▔ )ㄏ 安装错版本没关系，可以去点击设置-> 切换版本

在宝塔面板 软件商店 -> 应用搜索，搜索mysql，这里安装5.7以上版本，点击安装会弹出消息盒子，可以×掉，它会在后台下载

安装完后重置数据库管理员密码，放行3306端口


然后在云服务器创建个用户

~> mysql -uroot -p
Enter password:(输入刚刚设置的密码，密码默认不明码显示)

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
+--------------------+
3 rows in set (0.00 sec)
mysql> create user 'dogyupi'@'%' identified with mysql_native_password by 'yupi666';
//刷新权限使操作生效
mysql> FLUSH PRIVILEGES;
mysql> quit
Bye

不需要重启数据库即可生效
假如出现以下报错:

ERROR 1558 (HY000): Column count of mysql.user is wrong. Expected 43, found 42. Created with MySQL 50568, now running 50651. Please use mysql_upgrade to fix this error.

【原因】

这是因为系统自带的mysql版本需要更新

【解决方案】
先退出mysql(输入quit),然后在命令行输入

>> mysql_upgrade -udogyupi -p      //有密码就写密码
>> mysql -dogyupi -p

远程连接设置

把在所有数据库的所有表的所有权限赋值给位于所有IP地址的dogyupi用户

~> mysql -uroot -p
Enter password:(输入刚刚设置的密码，密码默认不明码显示)
//切换数据库
mysql> use mysql;
# Database changed
//查询user表
mysql> select user,host from user;
//MySQL默认所有的用户只能执行本机访问，若要远程访问，需要把远程访问的用户的host→%
mysql> update user set host='%'where user='dogyupi';
# Query OK, 1 row affected (0.00 sec)
//(如果有23000没关系，再次查询出现%，这个就可以了)
mysql> select user,host from user;
或者
mysql> select user,host from user where user='dogyupi';
+---------+---------------+
| user    | host          |
+---------+---------------+
| dogyupi | %             |
....
//刷新配置,使配置立即生效
mysql> flush privileges;
# Query OK, 0 rows affected (0.00 sec)

测试远程连接,点击测试，测试成功

其他的跟之前一样建表

4. 跨域问题解决

:::success
🪔 什么是跨域？浏览器为了用户的安全，仅允许向 同域名、同端口 的服务器发送请求。
💬 我们前端的域名是user，后端域名是user-backend，域名不一样就出现了跨域，跨域的话就报错了
因为同源策略，仅允许接收同协议、域名、同端口的响应，参考大佬讲解
:::
我们可以看一下网络请求

为了防止跨域，或者说为了检测跨域，浏览器它会在发送正式请求之前，发送一个预检请求，预检的请求方法是OPTIONS。
预检请求经常用来检查是否跨域，或者换一句话说，当我们请求的域名是和当前网页域名不同的时候，它就会发送预检请求。
可以自己再去了解一下，什么情况下会发送预检请求，有很多种情况，比如说域名不同😴

💡 预检请求的作用：就是提前探路，比如说你要坐飞机，预检请求提前查一下你这个飞机航班有没有晚点，是不是正常运行的，如果不是正常运行的，那也不用发下一个请求了，或者说下一个请求直接拒绝掉。

如何解决跨域？(三种方式)

1. 把域名、端口改成相同的（但我们这里写死了）

让服务器告诉浏览器：允许跨域（返回 cross-origin-allow 响应头）

2. 网关支持（Nginx）
3. 修改后端服务

网关支持（Nginx）

在 nginx 配置跨域，先把之前的反向代理删除

location ^~ /api/ {
    proxy_pass http://127.0.0.1:8080/api/;
    add_header 'Access-Control-Allow-Origin' $http_origin;
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers '*';
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}

点击保存即可

修改后端服务

方式一：
在 UserController 配置 @CrossOrigin 注解

@RequestMapping("/user")
@CrossOrigin(origins = {"#{前端域名}"},allowCredentials = "true")
public class UserController {
    ...
}

方式二：
添加 web 全局请求拦截器
创建个 config 包，把这个 WebMvcConfig 类放入即可

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路径
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                // 当**Credentials为true时，**Origin不能为星号，需为具体的ip地址
                // 【如果接口不带cookie, IP无需设成具体IP】
                .allowedOrigins("http://localhost:9527", 
                                "http://127.0.0.1:9527", 
                                "http://127.0.0.1:8082", 
                                "http://127.0.0.1:8083")
                // 是否允许证书 不再默认开启
                .allowCredentials(true)
                // 设置允许的方法
                .allowedMethods("*")
                // 跨域允许时间
                .maxAge(3600);
    }
}

方式三：
定义新的 corsFilter Bean，参考：https://www.jianshu.com/p/b02099a435bd