阿里云ECS部署Spring Boot+Vue项目【宝塔面板】

ps:文章里部署mysql和redis时使用了docker进行部署，实际不建议把数据库部署在docker上。这里这么做，是因为只购买了一个服务器，但是想部署两套数据库，一套生产，一套用于开发，将本地的开发库也搬到云上。

文章目录

阿里云ECS部署Spring Boot+Vue项目【宝塔面板】

教程基于宝塔面板，在购买服务器选择镜像时，需要选择带有宝塔面板的镜像，也可以自己装宝塔面板，安装教程可以查看宝塔官网。

一.环境准备

网站需要使用到的有：

mysql
redis
nginx
jdk

为了方便管理端口和应用隔离，使用docker进行基础件的部署是好的选择。

宝塔面板自带了docker管理：
在这里插入图片描述
点击线上镜像管理，拉取redis和mysql的镜像到本地，然后就可以进行容器的创建了。

点击容器，然后点击创建容器：
在这里插入图片描述
输入容器名，比如创建开发用数据库，可以起名mysql_develop，然后镜像选择mysql。

配置端口的映射：docker容器相当于一个虚拟机，拥有所有端口，但这些端口不是服务器的端口，所以想要通过服务器的端口访问容器的端口，需要进行端口的映射。

其中3201端口是服务器端口，3306端口是容器的端口（也就是容器内部署的mysql服务监听的端口），这样通过访问服务器的3201，就能访问到该容器的mysql服务。

创建mysql服务后，还需要配置密码才能正确启动服务。未配置密码时，查看容器日志（点击容器名或者点击右侧的管理->容器日志）可以发现，有错误日志：

2024-06-19 02:01:10+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 8.0.27-1debian10 started.
2024-06-19 02:01:10+00:00 [Note] [Entrypoint]: Switching to dedicated user 'mysql'
2024-06-19 02:01:10+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 8.0.27-1debian10 started.
2024-06-19 02:01:10+00:00 [ERROR] [Entrypoint]: Database is uninitialized and password option is not specified
You need to specify one of the following:
- MYSQL_ROOT_PASSWORD
- MYSQL_ALLOW_EMPTY_PASSWORD
- MYSQL_RANDOM_ROOT_PASSWORD

可以发现，原因就是没有配置密码，导致服务不能使用。

点击编辑容器–>更多设置：
在这里插入图片描述
向下滑动找到环境变量，添加如下内容，然后点击保存容器配置即可：

然后等待容器自动启动即可，可以发现状态已经变为运行中。

同样的方式就可以部署网站使用的数据库了。

接下来进行redis的部署，也是使用docker进行部署，流程同mysql的创建。

但是redis创建后在环境变更中指定密码后，并未生效，经过测试，只能进入容器后通过命令行设置密码了。流程如下：

点击容器后，选择容器终端，点击开启终端，输入redis-cli进入redis，然后输入config set requirepass password_root进行密码配置，等待控制台输出ok后，配置成功。

接下来是nginx的安装。

进入软件商店，搜索nginx后安装即可。

二、项目打包和部署

1. Vue 2.0项目打包和部署

首先需要修改相关配置，比如访问后端的地址。

然后执行npm run build，然后等待项目打包，完成后可以在目录中发现dist文件夹，直接将dist文件夹中的内容上传到服务器上保存网页的目录中即可，然后进行nginx的配置。比如项目放到/home/html/文件夹下，目录下的文件列表应该为：

static
index.html

进入软件商店，选择nginx，点击设置，点击配置修改，在配置文件中添加先关的配置：

server
    {
        listen 8081;
        server_name myhtml;
        index index.html;
        root  /home/html;

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }

        location ~ /\.
        {
            deny all;
        }

        access_log /home/html/access.log;
    }

其中比较重要的：

listen：配置要监听的接口，也就是提供网页服务的接口
root：配置网页文件路径，也就是刚才上传打包后的文件的路径
access_log：网站日志的保存路径和文件名

其他都是默认的配置，不用修改直接使用即可。

2. Spring Boot项目打包和部署

首先也是修改配置文件，将数据库、日志等配置修改为部署版本的配置（根据项目实际情况进行配置）。

在Idea中进行打包：
在这里插入图片描述
执行完成后，项目目录下文件夹target下将生成plas-0.0.1-SNAPSHOT.jar，这就是可以部署的项目包。

为了方便进行项目重启、日志查看，可以直接使用宝塔提供的网站管理功能进行部署，也可以自行上传jar包后通过命令行启动，这里只记录如何使用网站管理功能进行部署。

登录宝塔后点击左侧网站菜单，选择Java项目：
在这里插入图片描述
首先点击JAVA环境管理，进行JDK的安装，安装项目所使用版本的JDK。

安装好后关闭窗口后点击添加Java项目。

点击确定后即可完成部署。等待项目启动完成后就完成分部署了。

三、部署中遇到的问题

1. Vue2项目打包部署后访问时，发现样式丢失

需要对项目配置文件进行修改，让vue在打包的时候把配置文件也打包进静态文件中。

文件：build\vue-loader.conf.js

修改extract配置：

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: false // 修改成false
    // extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
}

重新打包部署后在访问样式就正确了。