当前位置：首页 > news >正文

学习记录：DAY18

news 来源：原创 2025/6/19 15:20:34

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

前言

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

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

日程

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

学习记录

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

学习内容

省流：

axios拦截器
nginx打包部署
Linux的命令与程序安装
项目部署服务器
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打包部署

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

配置nginx.conf：

server {listen       90;server_name  localhost;
}

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

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

启动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

用FinalShell将jdk二进制发布包上传到Linux。
解压安装包，并重定向到/usr/local（Linux安放软件的目录）：
```
tar -zxvf jdk-17.0.10_linux-x64_bin.tar.gz -C /usr/local
```

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

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

重新加载环境变量：
```
source /etc/profile
```
检查配置是否生效：
```
java -version
```

3.4 安装MySQL

准备工作：卸载Linux系统中自带的mysql/mariadb安装包，否则MySQL将安装失败：
```
rpm -qa | grep mariadb
rpm -e --nodeps mariadb-libs-5.5.60-1.el7_5.x86_64
```
下载并上传mysql安装包[mysql-8.0.30-linux-glibc2.12-x86_64.tar.xz]。
解压安装包到目录，并将解压后的文件夹移动到/usr/local目录下，改名为mysql：
```
tar -xvf mysql-8.0.30-linux-glibc2.12-x86_64.tar.xz
```

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

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

注册MySQL为系统服务：

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

初始化数据库：

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用户的临时密码，记得复制记录下来。

启动服务登录MySQL：

systemctl start mysql
mysql -uroot -pxxxxxx

配置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;

接着还需要对防火墙进行设置，将3306端口暴露出来：
```
firewall-cmd --zone=public --add-port=3306/tcp --permanent
```
刷新防火墙：
```
firewall-cmd --reload
```

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

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

3.5 安装Nginx

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

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

上传nginx的源码包[nginx.tar.gz]。
解压源码包到当前目录：
```
tar -zxvf nginx.tar.gz
```
进入到解压目录（cd nginx-1.20.2）后，执行指令：
```
./configure --prefix=/usr/local/nginx
```
重定向安装目录到/usr/local/nginx。
执行编译nginx的指令：
```
make
```
执行安装nginx的指令，安装到上述指定的/usr/local/nginx目录：
```
make install
```
进入到nginx安装目录/usr/local/nginx，启动nginx服务：
```
sbin/nginx
```

4. 项目部署服务器

4.1 前端部署

首先上传打包好的dist目录下的静态资源，并在nginx.conf配置反向代理服务器和路径重写规则。（具体移步【nginx打包部署】）
把防火墙nginx对应的监听端口暴露出去。
重启/启动nginx服务器：
```
sbin/nginx -s reload
```
尝试在网页中进行访问。

4.2 后端部署

首先检查配置文件中的ip路径，修改成服务器对应的路径。

这里我配置了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】

执行maven父工程的package生命周期，打包为jar。
在Linux的/usr/local目录下，创建目录并上传jar包。
在jar包目录下执行命令运行：
```
java -jar xxx.jar
```
可以使用nohup命令转到后台运行：
```
nohup java -jar xxx.jar &> xxx.log &
```
注意返回的进程id：
```
[2] 101236
```
查看进程：
```
ps -ef | grep 进程id
```
可以用tail -f命令查看日志。
结束进程：
```
kill -9 进程id
```
附加：安装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：在运行的容器中执行命令

示例说明

构建镜像
```
docker build -t my-image .
```
这将根据当前目录下的Dockerfile构建一个名为my-image的镜像。
拉取镜像
```
docker pull nginx
```
这将从Docker Hub拉取最新版本的Nginx镜像。
推送镜像
```
docker push my-image
```
这将把本地的my-image镜像推送到Docker Hub。
加载镜像
```
docker load -i my-image.tar
```
这将从文件my-image.tar加载镜像。
保存镜像
```
docker save -o my-image.tar my-image
```
这将把my-image镜像保存为文件my-image.tar。
列出镜像
```
docker images
```
这将列出本地所有镜像。
删除镜像
```
docker rmi my-image
```
这将删除本地的my-image镜像。

容器相关命令示例

运行容器
```
docker run -d -p 8080:80 nginx
```
这将运行一个Nginx容器，并将容器的80端口映射到宿主机的8080端口。
停止容器
```
docker stop container-id
```
这将停止指定ID的容器。
启动容器
```
docker start container-id
```
这将启动指定ID的容器。
重启容器
```
docker restart container-id
```
这将重启指定ID的容器。
删除容器
```
docker rm container-id
```
这将删除指定ID的容器。
列出容器
```
docker ps
```
这将列出所有正在运行的容器。
查看容器日志
```
docker logs container-id
```
这将查看指定ID的容器的日志。
在运行的容器中执行命令
```
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目录。

结语

结。