学习记录：DAY18

前端实战与项目部署学习笔记

前言

---

时间固执沉默无情的流逝，
小心握紧漠然通达的当下。

今天要把前端实战部分学完，有时间写写学科作业
----4.26----
放纵注定是场与自我无休止的拉扯，过度的妥协只会跌入自我空虚的深渊
真该死啊，发明出二合一的我，让我又多了可以偷懒的理由
这几天完成项目部署部分。

---

日程

---

中午，小学了一会。
晚_上七_点来_学习~
八点，前端学完，做做blog
做一个背叛自己的决定：去玩会游戏
----4.26----
9点半了，睡得比较迟，熬夜，但不知道在熬些什么
下午快4点，搞定Linux上的项目部署，迟点来做blog
9点半，非常非常烦躁，有没有什么修身养性的好方法啊

---

学习记录

---

计组：
SRAM，DRAM
----4.26----

---

学习内容

---

省流：

1. axios拦截器
2. nginx打包部署
3. Linux的命令与程序安装
4. 项目部署服务器
5. Docker命令，挂载

1. axios拦截器

在异步请求发送/响应接收之前，对数据进行处理，通常可用于token的携带，根据响应码进行重定向等。

// request 拦截器
request.interceptors.request.use((config) => {const loginUser = JSON.parse(localStorage.getItem('loginUser'));if (loginUser && loginUser.token) {config.headers.token = loginUser.token;}return config;},(error) => {return Promise.reject(error);}
);// response 拦截器
request.interceptors.response.use((response) => { // 成功回调return response.data;},(error) => { // 失败回调if (error.response.status === 401) {ElMessage.error('登录超时，重新登录');router.push('/login');}return Promise.reject(error);}
);

2. nginx打包部署

1. 运行package脚本的build命令，生成对应的dist文件夹。
2. 使用Nginx服务器nginx官网进行部署，把dist里面的资源拖入nginx包下的html文件夹。
3. 配置nginx.conf：

   server {listen       90;server_name  localhost;
   }
   

   还需要进行api路径的重定向，类似vite.config.js的配置：

   server {location ^~ /api/ {rewrite ^/api/(.*)$ /$1 break;proxy_pass http://localhost:8080;}
   }
   

4. 启动nginx.exe即可。
   常用cmd指令：
   • 启动：nginx.exe
   • 重载：nginx.exe -s reload
   • 停止：nginx.exe -s stop

3. Linux的命令与程序安装

3.1 首先要对虚拟机上的Linux进行远程连接，这里用的是FinalShell工具。

3.2 Linux常用命令

命令	作用	语法及选项	备注
ls	显示目录内容	ls [-al] [dir]	-a 显示所有文件及目录；-l 显示详细信息
cd	切换工作目录	cd [dirName]
mkdir	创建目录	mkdir [-p] dirName	-p 递归创建目录
rm	删除文件或目录	rm [-rf] name	-r 递归删除目录；-f 强制删除
cat	显示文件内容	cat [-n] fileName	-n 显示行号
more	分页显示文件内容	more fileName
head	查看文件开头内容	head [-n] filename	-n 指定行数
tail	查看文件末尾内容	tail [-n] filename	-n 指定行数
cp	复制文件或目录	cp [-r] source dest	-r 递归复制目录
mv	移动或重命名文件	mv source dest
tar	打包、压缩、解压	tar [-cxzvf] filename [files]	-c 创建包；-x 解压；-z 压缩；-v 显示过程；-f 指定文件名
find	查找目录下文件	find dir -name option
grep	搜索文本内容	grep [-iNA] word fileName	-i 忽略大小写；-A 显示匹配行后的行数
vim	文本编辑器	vim filename

3.3 安装JDK

1. 用FinalShell将jdk二进制发布包上传到Linux。
2. 解压安装包，并重定向到/usr/local（Linux安放软件的目录）：

   tar -zxvf jdk-17.0.10_linux-x64_bin.tar.gz -C /usr/local
   

3. 配置环境变量，使用vim命令打开/etc/profile文件，并在末尾添加环境变量：

   vim /etc/profile
   export JAVA_HOME=/usr/local/jdk-17.0.10
   export PATH=$JAVA_HOME/bin:$PATH
   

4. 重新加载环境变量：

   source /etc/profile
   

5. 检查配置是否生效：

   java -version
   

3.4 安装MySQL

1. 准备工作：卸载Linux系统中自带的mysql/mariadb安装包，否则MySQL将安装失败：

   rpm -qa | grep mariadb
   rpm -e --nodeps mariadb-libs-5.5.60-1.el7_5.x86_64
   

2. 下载并上传mysql安装包[mysql-8.0.30-linux-glibc2.12-x86_64.tar.xz]。
3. 解压安装包到目录，并将解压后的文件夹移动到/usr/local目录下，改名为mysql：

   tar -xvf mysql-8.0.30-linux-glibc2.12-x86_64.tar.xz
   

4. 配置环境变量（编辑/etc/profile，追加内容）：

   export MYSQL_HOME=/usr/local/mysql
   export PATH=$MYSQL_HOME/bin:$PATH
   

5. 注册MySQL为系统服务：

   cp /usr/local/mysql/support-files/mysql.server /etc/init.d/mysql
   chkconfig --add mysql
   

6. 初始化数据库：

   groupadd mysql
   useradd -r -g mysql -s /bin/false mysql
   mysqld --initialize --user=mysql --basedir=/usr/local/mysql --datadir=/usr/local/mysql/data
   

   初始化完毕后，日志中会输出MySQL的root用户的临时密码，记得复制记录下来。
7. 启动服务登录MySQL：

   systemctl start mysql
   mysql -uroot -pxxxxxx
   

8. 配置MySQL的root用户的密码，授权远程访问：

   ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '1234';
   CREATE USER 'root'@'%' IDENTIFIED BY '1234';
   GRANT ALL PRIVILEGES ON *.* TO 'root'@'%';
   FLUSH PRIVILEGES;
   

9. 接着还需要对防火墙进行设置，将3306端口暴露出来：

   firewall-cmd --zone=public --add-port=3306/tcp --permanent
   

10. 刷新防火墙：

    firewall-cmd --reload
    

11. 接着就可以到cmd进行连接测试：

    mysql -h服务器ip -P3306 -u用户名 -p密码
    

3.5 安装Nginx

1. 安装nginx运行时需要的依赖：

   yum install -y pcre pcre-devel zlib zlib-devel openssl openssl-devel
   

2. 上传nginx的源码包[nginx.tar.gz]。
3. 解压源码包到当前目录：

   tar -zxvf nginx.tar.gz
   

4. 进入到解压目录（cd nginx-1.20.2）后，执行指令：

   ./configure --prefix=/usr/local/nginx
   

   重定向安装目录到/usr/local/nginx。
5. 执行编译nginx的指令：

   make
   

6. 执行安装nginx的指令，安装到上述指定的/usr/local/nginx目录：

   make install
   

7. 进入到nginx安装目录/usr/local/nginx，启动nginx服务：

   sbin/nginx
   

4. 项目部署服务器

4.1 前端部署

1. 首先上传打包好的dist目录下的静态资源，并在nginx.conf配置反向代理服务器和路径重写规则。（具体移步【nginx打包部署】）
2. 把防火墙nginx对应的监听端口暴露出去。
3. 重启/启动nginx服务器：

   sbin/nginx -s reload
   

4. 尝试在网页中进行访问。

4.2 后端部署

1. 首先检查配置文件中的ip路径，修改成服务器对应的路径。
2. 这里我配置了aliyunOSS服务，所以要在服务器环境变量中配置key：

   echo %OSS_ACCESS_KEY_ID%
   echo %OSS_ACCESS_KEY_SECRET%
   

   在Linux的/etc/profile下添加配置：

   export OSS_ACCESS_KEY_ID=【你的key】
   export OSS_ACCESS_KEY_SECRET=【你的key】
   

3. 执行maven父工程的package生命周期，打包为jar。
4. 在Linux的/usr/local目录下，创建目录并上传jar包。
5. 在jar包目录下执行命令运行：

   java -jar xxx.jar
   

   可以使用nohup命令转到后台运行：

   nohup java -jar xxx.jar &> xxx.log &
   

6. 注意返回的进程id：

   [2] 101236
   

7. 查看进程：

   ps -ef | grep 进程id
   

8. 可以用tail -f命令查看日志。
9. 结束进程：

   kill -9 进程id
   

10. 附加：安装lsof工具可以查看当前端口的占用情况：

    sudo yum install lsof #安装
    lsof -i :端口号 #查看
    

5. Docker命令，挂载

Docker是用于构建管理应用的工具，原理是把应用和所需的环境全部包装成一个镜像（类似一个小系统），并在隔离的容器中运行。

5.1 Docker命令

以下是提取的文字内容及Docker命令的说明和示例：

---

常见命令

Docker最常见的命令就是操作镜像、容器的命令，详见官方文档：Docker官网

镜像相关命令

• docker build：根据Dockerfile构建镜像
• docker pull：从镜像仓库拉取镜像
• docker push：将本地镜像推送到镜像仓库
• docker load：从文件加载镜像
• docker save：将镜像保存为文件
• docker images：列出本地镜像
• docker rmi：删除本地镜像

容器相关命令

• docker run：运行容器
• docker stop：停止容器
• docker start：启动容器
• docker restart：重启容器
• docker rm：删除容器
• docker ps：列出容器
• docker logs：查看容器日志
• docker exec：在运行的容器中执行命令

示例说明

1. 构建镜像

   docker build -t my-image .
   

   这将根据当前目录下的Dockerfile构建一个名为my-image的镜像。

2. 拉取镜像

   docker pull nginx
   

   这将从Docker Hub拉取最新版本的Nginx镜像。

3. 推送镜像

   docker push my-image
   

   这将把本地的my-image镜像推送到Docker Hub。

4. 加载镜像

   docker load -i my-image.tar
   

   这将从文件my-image.tar加载镜像。

5. 保存镜像

   docker save -o my-image.tar my-image
   

   这将把my-image镜像保存为文件my-image.tar。

6. 列出镜像

   docker images
   

   这将列出本地所有镜像。

7. 删除镜像

   docker rmi my-image
   

   这将删除本地的my-image镜像。

容器相关命令示例

1. 运行容器

   docker run -d -p 8080:80 nginx
   

   这将运行一个Nginx容器，并将容器的80端口映射到宿主机的8080端口。

2. 停止容器

   docker stop container-id
   

   这将停止指定ID的容器。

3. 启动容器

   docker start container-id
   

   这将启动指定ID的容器。

4. 重启容器

   docker restart container-id
   

   这将重启指定ID的容器。

5. 删除容器

   docker rm container-id
   

   这将删除指定ID的容器。

6. 列出容器

   docker ps
   

   这将列出所有正在运行的容器。

7. 查看容器日志

   docker logs container-id
   

   这将查看指定ID的容器的日志。

8. 在运行的容器中执行命令

   docker exec -it container-id /bin/bash
   

   这将在指定ID的容器中打开一个交互式的bash shell。

5.2 挂载

我们是无法直接修改docker容器内部的文件的，但是Docker提供了数据卷挂载来提供桥梁。通过数据卷挂载连接容器内目录和宿主机目录，宿主机目录文件的改变会同步到容器内目录。

命令	说明	文档地址
docker volume create	创建数据卷	docker_volume_create
docker volume ls	查看所有数据卷	docker_volume_ls
docker volume rm	删除指定数据卷	docker_volume_rm
docker volume inspect	查看某个数据卷的详情	docker_volume_inspect
docker volume prune	清除所有未使用的数据卷	docker_volume_prune

挂载在容器创建时执行：

docker run -d \--name mysql \-p 3307:3306 \-e TZ=Asia/Shanghai \-e MYSQL_ROOT_PASSWORD=123 \-v /root/mysql/data:/var/lib/mysql \-v /root/mysql/conf:/etc/mysql/conf.d \-v /root/mysql/init/docker-entrypoint-initdb.d \mysql:8

注意：

• 以/或./开头，会被定位到本地目录。
• 直接以文件名开头，则是定位到/var/lib/docker/volumes/xxx/_data目录。

---

结语

---

结。

---