Web 前端项目与 Node 后端部署 Linux 服务器基本流程

Linux 项目部署

购买云服务器

…

配置云服务器

查看云服务器中是否存在 dnf 工具: **通过 dnf 在服务器系统中（CentOS）下载对应的应用等 < dnf 是 Yum 的下一个版本，也是 Yum 的替代品>**

• # tip: 需先买好云服务器后，可通过云服务器实例中直接进行远程连接，或使用 vscode 进行远程连接（在比笔记最下方） -- 进入对应 linux 控制台后，我们就可以开始搭建我们的服务器环境了
  
  # 检查 dnf 是否可用 <在 CentOS8 之后的系统默认有 dnf，如果系统非 CentOS8.0 以上的需要手动安装对应的 dnf>
  dnf --help 
  
  # 安装 dnf，需要先安装并启动 epel-release 依赖
  yum install epel-release
  
  # 安装 dnf
  yum install dnf
  
  dnf --version # 查看是否安装成功
  

Nginx 的安装与配置（Nginx 服务的默认端口为：80）

• 1. 安装 Nginx：dnf install nginx
  
  2. 启动 Nginx：
      systemctl start nginx # 启动
      systemctl status nginx # 查看状态
      systemctl enable nginx # 开启开机自启动 Nginx 服务
      systemctl stop nginx # 停止
  
  3. 配置 Nginx：<建议通过 VSCode 连接远程的服务器进行对应的配置修改，比使用 vim 高效且不易出错>
      - 修改 /etc/nginx/nginx.conf 中的某些配置项
          - 将 "user nginx;" 修改为 "user root;" <使root用户可以访问所有文件的权限>
          
  4. 保存修改后我们可以先 "systemctl start nginx" 启动一下 nginx，启动后访问云服务器 IP 地址时，能访问到 nginx 默认服务器的欢迎页了，说明 nginx 就启动成功，就没什么问题了
          
  5. 接下来我们只需把打包好的项目（dist）目录，放到 linux 下的 root 目录中即可
  
  6. 我们此时就可以通过 "云服务器IP/dist" 来访问到该部署的项目了（同学们也可以自行修改 dist 目录的名称，访问同理 "云服务器IP/自定义项目打包目录名称"）
  
  7. 通过上面步骤，我们的 web 项目就已经部署好了
  

• **额外补充: ** 如果同学们觉得将项目放在 root 目录下不好，或者想要将项目放在其它目录中时，可以配置 "/etc/nginx/nginx.conf" 中的 "location" 跟目录访问地址 了解

  • # 通过配置: http > server > location > root: 自定义目录名称;
    http {
    	# ...
        server {
            listen       80;
            listen       [::]:80;
            server_name  _;
            root         /usr/share/nginx/html;
            
            location / { 
                root /custom_dir; # 默认为 root 目录
                index index.html;
            }
    		# ...
        }
    }
    

Node 于 mysql 环境的搭建:

• 在上面我们学会了通过 nginx 部署一个基本 web 项目，那么接口又该如何来部署呐，那么接下来老师就带着同学们来进行环境的搭建!

• linux 中安装 node 工具:

  • # 配置 nvm 安装源
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
    nvm install 20
    
    # 版本查看
    node -v 
    npm -v 
    

  • 安装好后如果同学们的 node 接口中没有依赖 mysql 等数据库，就可以直接将接口项目的整个目录复制到同学们想要放的目录下

  • 在对应的目录下直接启动该服务即可（"npm run start"），启动好后就可以通过 "云服务器IP:Node显目服务端口" 来访问对应的Node服务了

  • *: 在访问中可能会出现跨域问题，同学们需要自行配置对应的跨域处理（前面已经讲过），或者将 web 项目也在 该 Node 服务中进行部署

• 通过 dnf 下载项目中 mysql 依赖，并配置与迁移 mysql:

  • 1. 安装 mysql-server："dnf install mysql-server --nogpgcheck" # tip: 当有安装时 GPG 令牌错误，先通过 "dnf clean packages" 清除 dnf 缓存包，再进行 mysql-server 的安装
    
    2. 启动 mysql:
    	"systemctl start mysqld" # 启动 mysql 服务
    	"systemctl enable mysqld" # 开启开机自启动 mysql 服务
    	
    3. 配置 mysql 密码: 
       	# 修改配置文件,让 mysql 不进行密码授权先，在进入里面配置对应的新密码后，再将 mysql 不进行密码授权先给取消掉
            <1> "vim /etc/my.cnf" # 进入 my.cnf 配置文件
            
            <2> 在 [mysqld] 底下添加语句： skip-grant-tables # 如果没有该 [mysqld] 时，手动添加上即可
            
            <3> 重启 mysql："systemctl restart mysqld.service"
            
            <4> 直接登录："mysql -u root -p" 回车 # 可以不输入密码，直接登录
            
            <5> 使用系统数据库mysql库："use mysql;" # mysql 库主要用于配置 mysql 的配置等
            
            <6> 刷新 mysql 权限表："flush privileges";
            
            <7> 修改 mysql 密码命名："alter user 'root'@'localhost' identified by '123456';" | "set password for root@localhost='123456';" `注: 修改时如果会出现 ERROR 1819 (HY000): Your password does not satisfy the current policy requirements 错误 <原因：自定义密码太简单，出现了不符合密码策略的问题>，再 mysql 高版本中密码需要符合 "大小写字符、数字与特殊字符" 规则（如: "Imysqlpass123" ...）`
            
            <8> 退出 mysql 并删除前面再 /etc/my.cnf 中配置的 skip-grant-tables 项
                - (1) 退出 mysql："exit;"
                - (2) 通过 vim /etc/my.cnf 删除前面在 [mysqld] 底下添加的 skip-grant-tables 配置项
                - (3) 重启 mysql："systemctl restart mysqld.service"
                - (4) 再通过 "mysql -u root -p自定义mysql服务登录密码" 进行 mysql 的登录即可
    
    4. 将我们 window/mac 电脑中的数据库上传至远程服务器 mysql 数据库中
    	<1> 我们可以通过自己本地的 navicat 等工具，来连接远程的 mysql 数据库 `注: 老师这里使用的时正版的 navicat，同学们可以前往官网进行对应的下载等（老师在这里就不演示了）`
    	
    	<2> 在 navicat 中点击连接，连接新数据库，对应的连接地址使用 "远程服务器" 的地址，端口默认是 3306
    	
    	<*> 在连接时远程 mysql 连接不上时，失败的原因可能是同学们的云服务器中的安全组没有配置对应的 "3306" 端口 `同学们在云服务器实例安全组中配置上该 3306 端口` 
    	
    	<*> 同学们会发现就算在安全组中配置了 "3306" 端口，连接时还是连接失败，这又是为什么? 
    		- `这是因为MySQL配置中的 root 用户默认访问权限只能在 "localhost" 主机上进行访问，即只能通过本地方法`
    		- `我们需要修改 root 用户的默认访问权限，具体如下`
    		- <1> 在 mysql 中查询 mysql.user 表中的 host，user 字段：
    			"use mysql;"
    			"select host,user from user;" `一般会查出如下信息`
                    +-----------+------------------+
                    | host      | user             |
                    +-----------+------------------+
                    | localhost | mysql.infoschema |
                    | localhost | mysql.session    |
                    | localhost | mysql.sys        |
                    | localhost | root             | `可以看到这里 root 用户对应的 host 只能是 localhost`
                    +-----------+------------------+
                    
            - <2> 通过 SQL 语句将该表中 root 的 host 修改为 "%" `表示允许任何 host 主机访问该 mysql 数据库`
                 "update user set host = '%' where user = 'root'"
                    
            - <3> 重启远程的 mysql 服务即可进行远程连接：
            	"exit;"
            	"systemctl restart mysqld.service;"
    
    5. 数据库的迁移: 先将本地的数据库中的所有的表结构与数据转存到一个 SQL 文件中，再去远程的 mysql 中新建一个数据库来运行该 SQL 数据库文件 
    

🔺配置再 vscode 中连接上远程服务器的文件（相对于使用 vi/vim 方便修改…）

• 1. VSCode 插件安装：'Remote-SSH' `安装该插件后，vscode 左侧会多出一个小电脑图标，我们可以通过点击该图标进行远程服务器的连接 -- 具体如下`
  
  2. 通过该插件进行添加对应的远程服务器电脑：`当有提示输入密码时，输入同学们的云服务器实例密码即可`
      <1> 点击对应插件图标里面中的 + 号，添加远程连接 <会有弹出一个输入框，输入对应的连接命令>
      	+ "ssh root@远程IP地址" 
      
      <2> 之后左侧对应的导航窗口就会多出对应的远程服务器，可以点击对应的按钮进行连接该服务器 
      
      <4> 登录之后可以再 VSCode 中选择打开目录，所访问到的目录就是对应远程服务器的目录/文件