Vue SpringBoot项目部署到服务器

主要分以下几个步骤：

安装mysql（可以直接安装，也可以选择在docker中安装，本文是后者）
安装Java编译环境（jdk）
maven打包（后端文件打包）
Vue打包（前端文件打包）
安装nginx并配置相关文件
一些坑

服务器安装mysql

这里是在Docker中安装了mysql，具体步骤如下：

Docker

docker安装（参考菜鸟教程“https://www.runoob.com/docker/ubuntu-docker-install.html”）：

卸载旧版本：

sudo apt-get remove docker docker-engine docker.io containerd runc

更新apt包索引：

sudo apt-get update

安装 apt 依赖包，用于通过HTTPS来获取仓库:

sudo apt-get install \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg-agent \
    software-properties-common

添加 Docker 的官方 GPG 密钥：

curl -fsSL https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu/gpg | sudo apt-key add -

通过搜索指纹的后8个字符，验证您现在是否拥有带有指纹的密钥：

sudo apt-key fingerprint 0EBFCD88

设置稳定版仓库：

sudo add-apt-repository \
   "deb [arch=amd64] https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu/ \
  $(lsb_release -cs) \
  stable"

安装Docker Engine-Community

安装最新版的Docker Engine-Community 和 containerd：

sudo apt-get install docker-ce docker-ce-cli containerd.io

测试Docker 是否安装成功，输入以下指令，打印出以下信息则安装成功:

sudo docker run hello-world

Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
1b930d010525: Pull complete                                                                                                                                  Digest: sha256:c3b4ada4687bbaa170745b3e4dd8ac3f194ca95b2d0518b417fb47e5879d9b5f
Status: Downloaded newer image for hello-world:latest


Hello from Docker!
This message shows that your installation appears to be working correctly.


To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.


To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash


Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/


For more examples and ideas, visit:
 https://docs.docker.com/get-started/

docker命令：

启动：
systemctl start docker
守护进程重启：
systemctl daemon-reload
重启docker服务：
systemctl restart docker / service docker restart
关闭：
docker service docker stop / docker systemctl stop docker
开机自启：
systemctl enable docker
Docker需要用户具有sudo权限，为了避免每次都输入sudo，可以把用户加入Docker用户组
sudo usermod -aG docker $USER
查看镜像：
docker images
查看进程
docker ps
安装mysql：
docker pull mysql:5.7

docker阿里云镜像加速：

mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<-"EOF"
>{
>   "registry-mirrors": ["https://3n4m4jry.mirror.aliyuncs.com"]
> }
> EOF
sudo systemctl daemon-reload
sudo systemctl restart docker

启动mysql：

docker run -p 3306:3306 --name mysql \       //前面是本机端口号、后面是mysql的端口号
-e MYSQL_ROOT_PASSWORD=root \
-d mysql:5.7

进入mysql

//进入mysql容器：
docker exec -it [容器id] /bin/bash
//登录mysql，没有空格：
mysql -uroot -proot

安装配置Java环境

上传并解压jdk：

tar -xzvf [文件名]

修改/etc/profile文件

export PATH=$PATH:$JAVA_HOME/bin

export JAVA_HOME=/home/auto/jdk1.8
export CLASSPATH=$:CLASSPATH:$JAVA_HOME/lib/

激活配置：

source /etc/profile

查看是否安装成功：

java -version

Maven打包

maven打包：一定要在项目的根目录下

mvn clean package -DskipTests

打包完成之后会在target下面出现对应文件
在这里插入图片描述
将该文件上传到服务器，运行该jar包

java -jar [文件名]

如果想后台运行，使用如下命令：

nohup java -jar springboot-0.0.1-SNAPSHOT.jar &

查看日志

tail -500f nohup.out
cat nohup.out

查看java是否启动

ps -ef | grep java

关停：

kill -9 [进程号]

Vue打包

vue打包（在前端的目录下，先把dist目录删除）：

npm run build

就会生成一个dist目录

安装anywhere前端静态资源服务器插件：

npm install anywhere -g

使用anywhere启动静态文件，测试dist是否正确可用

anywhere -p [端口号]

将dist目录拖到服务器上

安装nginx并配置相关文件

安装依赖包：

apt-get install gcc
apt-get install libpcre3 libpcre3-dev
apt-get install zlib1g zlib1g-dev
# Ubuntu14.04的仓库中没有发现openssl-dev，由下面openssl和libssl-dev替代
#apt-get install openssl openssl-dev
sudo apt-get install openssl 
sudo apt-get install libssl-dev

将安装包拖到服务器上并解压

tar -zxvf nginx-1.20.2.tar.gz

配置和安装：

cd nginx-1.20.2/
./configure --prefix=/home/auto/nginx
make && make install

启动：

cd sbin/
./nginx

使用ip检查是否启动成功：

在这里插入图片描述
vue dist nginx配置：

cd conf/
vim nginx.conf
location / {
            root /home/auto/code_main/springserver/dist;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

重启nginx：

cd sbin/
./nginx -s reload

一些坑

可能会出现后端虽然能成功运行，但是其他设备仍然无法访问的问题。
有可能出现的原因：端口号未开启
打开服务器对应端口号：

/sbin/iptables -I INPUT -p tcp --dport 9090 -j ACCEPT

前端部署完成之后，使用前端功能可能会出现跨域问题。
有可能的原因：前端请求的url没有修改，要进行修改并重新打包。

大功告成！