虚拟机安装,部署spring boot+vue前后端分离项目,从零开始

虚拟机安装,部署spring boot+vue前后端分离项目,从零开始

    • 虚拟机环境安装
      • 下载centos7镜像
      • 安装centos7镜像
        • 下载VMware Workstation Pro
        • 创建虚拟机
      • 配置网络环境
        • 配置VM网络
        • 配置服务器静态ip
    • 连接虚拟机服务器
      • Finalshell
    • 安装docker
      • 安装docker
      • docker常用命令
    • docker创建MySQL容器
    • docker创建redis容器
    • docker创建nginx容器
    • 项目部署
      • 部署后端
      • 部署前端

虚拟机环境安装

下载centos7镜像

安装centos7镜像

下载VMware Workstation Pro
  1. 进入博通官网----->博通 | 万物互联 (broadcom.cn)

  2. 将鼠标移动到页面右上角的"Support Portal",会弹出子菜单,点击“Register”按钮,在 Broadcom 官网注册一个账户。

    博通官网注册

  3. 输入一个email地址,输入验证码,点击“next”按钮,进入自己的email邮箱查收邮件。
    注册

  4. 邮箱将收到一封含有验证码的邮件,返回 Broadcom 官方网站,输入邮件中的验证码并点击“Verify & Continue”按钮。
    注册

  5. 填写注册信息,选中下方的复选框,点击“create account”按钮。
    注册

  6. 账号注册完成之后,页面会自动跳转到“ Broadcom Support Portal”页面,点击右上角的“Login”按钮,并输入刚刚注册的用户名和密码进行登录(用户名称就是email地址)。
    登录

    对于已经注册用户:
    登录

  7. 点击左上角的“Software”,接着点击“VMware Cloud Foundation”,然后点击“My Downloads”链接。(二次登录跳过)

  8. 在搜索框输入“workstation”并按下回车键,下方会显示 VMware Workstation Player 和 VMWare Workstation Pro,点击“VMWare Workstation Pro”链接。
    搜索

  9. 如果是 Windows 版,点击“VMWare Workstation Pro 17.0 for Personal User(Windows)”,选择当前最新的版本号。

    后边的语言虽然显示“english”,但安装的时候会根据自己的系统语言自动适配。

    点击版本号进入下载页面。
    下载

  10. 选中“I agree to Broadcom Terms and Conditions”这个选项,点击下载按钮。(二次下载用户直接开始下载即可)
    下载

  11. 弹出的对话框中点击“Yes”按钮。下载

  12. 任意填写注册信息,选中“I Agree”,点击“Submit”按钮。
    注册信息

  13. 点击下载按钮即可开始下载。
    下载

  14. 下载完成后,双击 “VMWare Workstation Pro”的安装程序开始进行安装,安装完成后,点击“许可证”。
    安装

  15. 选择“将 VMware Workstation 17 用于个人用途”。
    安装

创建虚拟机
  1. 添加虚拟机添加

  2. 直接点击下一步下一步

  3. 选择镜像(镜像自找,centos8可在MSDN centos8下载)安装

  4. 用户名、密码牢记(用户名不建议root)注册

  5. 下面配置存储位置和硬件信息即可

配置网络环境

配置VM网络
  1. 打开虚拟网络编辑器网络

  2. 更改设置
    网络

  3. nat模式下,子网ip和子网掩码应个虚拟机内网络设置相同网络

  4. 点击NAT设置,网关应该与虚拟机内网关地址相同网络

(建议xxx.xxx.xxx.2)

配置服务器静态ip
  1. 打开虚拟机,右键打开terminanl,进入超级用户

    su #输入密码就可以了
    

    查看虚拟机网络ip

    ifconfig #查看网络ip
    
  2. 使用vim编辑

    #进入目录
    cd /etc/sysconfig/network-scripts/
    
    #注:将 <interface> 替换为你要设置固定 IP 的网络接口,例如 eth0、ens33 
    vim ifcfg-<interface>   
    #例如:vim ifcfg-ens33
    
  3. 在打开的文件中,找到并修改以下配置项来设置固定 IP 地址、子网掩码、网关和 DNS 服务器

    TYPE=Ethernet
    BOOTPROTO=static  #将其改为 static
    DEFROUTE=yes
    
    #这里改为eth0 或者 ens33 比如:NAME=ens33
    NAME=ens33 
    
    #这个不知道 就可以不用设置
    #UUID="69b5a74b-c46f-48e0-a2a5-959721dff85e"
    #UUID=<UUID>  
    DEVICE=ens33  #这里改为eth0 或者 ens33 比如:DEVICE=ens33  可以不用这行
    ONBOOT=yes
    
    IPADDR=192.168.xxx.xxx     # 你要设置的固定 IP 地址
    NETMASK=255.255.255.0      # 子网掩码
    GATEWAY=192.168.xxx.2      # 网关 IP 地址
    DNS1=8.8.8.8               # 首选 DNS 服务器
    DNS2=8.8.4.4               # 备选 DNS 服务器
    

    然后保存文件使用vim命令模式保存退出 :wq!

  4. 重启网络 查看是否生效

    #重启网网络
    sudo systemctl restart network
    
    #以下两种查看是否生效
    ip addr show ens33 #我的是ens33根据自己的来
    
    #或者 用
    ifconfig
    
    #查看网络状态命令
    systemctl status network.service
    

连接虚拟机服务器

Finalshell

  1. 采用ssh连接(用户名一定是root),主机为服务器地址,密码是服务器密码。
    连接

安装docker

安装docker

  1. 安装yum工具

    yum install -y yum-utils
    
  2. 存储设备映射必须安装依赖包

    yum install -y yum-utils device-mapper-persistent-data lvm2
    
  3. 设置阿里云yum源

    yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
    
  4. 安装docker-ce(Docker从17.03版本之后分为两个版本:社区版(Community Edition,缩写为 CE)和企业版(EnterpriseEdition,缩写为 EE).企业版包含了一些收费服务,个人开发者一般用不到,所以我们只需要安装社区版docker-ce版本即可。)

    yum install -y docker-ce
    
  5. 启动docker并设置开机自启

    #启动docker命令
    systemctl start docker
    
    #设置开机自启命令
    systemctl enable docker
    
    #查看docker版本命令
    docker version
    
    #查看docker运行状态
    systemctl status docker
    
  6. 配置镜像加速(阿里云镜像容器服务,容易更换建议现查现用,每个人不一样---->容器镜像服务 (aliyun.com)

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

docker常用命令

#查看正在运行的容器
docker ps
#查看全部容器
docker ps -a
#启动容器
docker start 容器名称/ID
#停止容器
docker stop 容器名称/ID
#查看容器运行日志
docker logs 容器名称/ID
#删除容器
docker rm 容器名称/ID
#强制删除容器(不论运行与否)
docker rm -f 容器名称/ID
#查看镜像
docker images
#删除镜像
docker rmi 镜像名称/ID
#强制删除镜像
docker rmi -f 镜像名称/ID
#拉取镜像
docker pull 镜像名称:版本
#设置容器自动重启
docker update --restart=always 容器名称/ID

docker创建MySQL容器

  1. docker run -id --privileged=true -p 3306:3306 --name mysql5.7 \
    -v /mysql/log:/var/log/mysql \
    -v /mysql/data:/var/lib/mysql \
    -v /mysql/conf:/etc/mysql/conf.d \
    -e MYSQL_ROOT_PASSWORD=password -d mysql:5.7 \
    --lower_case_table_names=1
    

    -id --privileged=true : 挂载文件权限开放

    -p : 端口号(外:内)

    –name : 容器名

    -v : 文件挂载

    -e MYSQL_ROOT_PASSWORD={密码} : 数据库密码

    -d : 应用版本(mysql:xxx,不指定xxx默认latest ,–>mysql)

    –lower_case_table_names=1 : 大小写不敏感

  2. 设置容器自启动

    docker update --restart=always mysql5.7
    
  3. 开放端口

    #开放端口
    sudo firewall-cmd --zone=public --add-port=3306/tcp --permanent
    
    #重启防火墙
    sudo systemctl restart firewalld
    
    #查看以开放的端口
    sudo firewall-cmd --list-ports
    

    如果之后还是无法外部访问,尝试一下重启服务器

docker创建redis容器

docker run \
-d \
--name redis \
-p 6379:6379 \
--restart always \
-d redis

**-d :**后台运行

–restart always :容器自动重启策略

-d redis :应用版本(默认latest)

docker创建nginx容器

  1. 创建挂载目录

    # 创建挂载目录
    mkdir -p /nginx/conf
    mkdir -p /nginx/log
    mkdir -p /nginx/html
    
  2. 创建挂载文件

    # 生成容器
    docker run --name nginx -p 80:80 -d nginx
    
    # 将容器nginx.conf文件复制到宿主机
    docker cp nginx:/etc/nginx/nginx.conf /nginx/conf/nginx.conf
    
    # 将容器conf.d文件夹下内容复制到宿主机
    docker cp nginx:/etc/nginx/conf.d /nginx/conf/conf.d
    
    # 将容器中的html文件夹复制到宿主机
    docker cp nginx:/usr/share/nginx/html /nginx/
    
  3. 删除该容器

    # 删除正在运行的nginx容器
    docker rm -f nginx
    
  4. 创建所需nginx容器,并挂载

    docker run \
    -p 80:80 \
    --restart=always \
    --name nginx \
    -v /nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
    -v /nginx/conf/conf.d:/etc/nginx/conf.d \
    -v /nginx/log:/var/log/nginx \
    -v /nginx/html:/usr/share/nginx/html \
    -d nginx:latest
    

项目部署

部署后端

  1. 在Linux任意目录下创建Dockerfile Dockerfile (文件内容如下)

    #自动拉取镜像
    FROM openjdk:8
    #作者
    MAINTAINER www
    #对外暴露的端口号
    EXPOSE 8080
     
    ADD jt.jar jt.jar
    #运行的方式
    ENTRYPOINT ["java","-jar","/jt.jar"]
    
  2. 修改后端配置文件(xml/yml)

    • 数据库地址、账号、密码
    • redis地址
    • 文件服务器地址
  3. 将后端项目打包生成jar包(多环境)

    mvn clean package -Ppro -DskipTests
    

    -DskipTests :跳过单元测试(正常打包测试出问题时加)

  4. 将jar包导入到和Dockerfile相同目录下

  5. 构建镜像

    docker build -t jt:1.0 .
    

    docker build : 就是构建一个docker镜像

    -t jt:1.0 :-t参数是指定镜像的名称(repository和tag)

    . : 最后的点是指构建时 Dockerfile所在路径,如果已经进入Dockerfile所在目录,则指定的是 ‘.’ 代表当前目录,如果在根目录需要 指定Dockerfile目录

    # 直接指定Dockerfile目录
    docker build -t jt:1.0 /home/bushu
    
  6. 创建并运行容器

    docker run -d --restart=always --name jt -p 8080:8080 jt:1.0
    

    –name :jar包名

    jt:1.0 :上面构建的镜像名

部署前端

  1. 修改/nginx/conf/conf.d中的default.conf文件

    server {
        listen       80;
        listen  [::]:80;
        server_name  198.168.xxx.xxx; #修改服务器地址
    
        #access_log  /var/log/nginx/host.access.log  main;
    
        location / {
            root   /usr/share/nginx/html/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    
        location /prod-api/ { #此处根据情况修改
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://198.168.xxx.xxx:8080/; #指向后端地址
        }
    
        #error_page  404              /404.html;
    
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}
    
        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}
    
        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }
    
    

    注意:root后面跟的是容器内的目录,应为我们将/usr/share/nginx/html与/nginx/html做了挂载,所以将dist放到/nginx/html中就是放到了容器的/usr/share/nginx/html中

  2. 修改前端配置文件指向后端地址端口

  3. 打包前端项目生成dist文件夹

    npm/pnpm run build
    
  4. 将打包好的前端项目dist文件夹上传到/nginx/html路径下

  5. 重启nginx容器

    docker restart nginx
    
  6. 访问前端页面198.168.xxx.xxx

  • 9
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将Spring Boot + Vue项目部署Linux上,您可以按照以下步骤进行操作: 1. 首先,确保您已经在Linux服务器安装了Java运行环境(JRE)和Node.js。您可以使用以下命令来验证它们是否已安装: ```shell java -version node -v ``` 如果命令返回版本信息,则说明已成功安装。 2. 将您的Spring Boot后端应用程序打包成可执行的JAR文件。您可以使用Maven或Gradle进行构建。在项目根目录下运行以下命令: ```shell mvn clean package ``` 或 ```shell gradle clean build ``` 这将生成一个可执行的JAR文件。 3. 接下来,将Vue前端应用程序打包成静态文件。在Vue项目根目录下运行以下命令: ```shell npm run build ``` 这将生成一个dist目录,其中包含了打包后的静态文件。 4. 将生成的JAR文件和dist目录复制到Linux服务器上。您可以使用FTP工具或SCP命令进行复制。 ```shell scp /path/to/your-app.jar user@your-server-ip:/path/on/server/ scp -r /path/to/dist user@your-server-ip:/path/on/server/ ``` 5. 连接到Linux服务器,并在目标部署目录下创建一个新目录,用于存放您的应用程序文件。 ```shell ssh user@your-server-ip mkdir /path/on/server/your-app ``` 6. 将JAR文件重命名为您想要的应用程序名称,并将其复制到目标部署目录。 ```shell mv /path/on/server/your-app.jar /path/on/server/your-app/your-app.jar ``` 7. 配置Linux服务器上的服务管理工具(例如systemd)以管理您的Spring Boot应用程序。创建一个新的服务配置文件,如`your-app.service`,并将以下内容添加到该文件中: ```plaintext [Unit] Description=Your App After=syslog.target [Service] User=your-user ExecStart=/usr/bin/java -jar /path/on/server/your-app/your-app.jar SuccessExitStatus=143 [Install] WantedBy=multi-user.target ``` 将`your-user`替换为您在Linux服务器上的用户名。 8. 将服务配置文件复制到服务目录,并启动您的应用程序服务。 ```shell sudo cp /path/on/server/your-app.service /etc/systemd/system/ sudo systemctl start your-app ``` 9. 现在,您的Spring Boot应用程序已经在Linux服务器上成功部署。通过访问服务器的公共IP或域名,加上您在Vue应用程序中定义的端口号,即可访问您的应用程序。 请注意,上述步骤仅适用于将Spring Boot + Vue项目部署Linux服务器上。实际操作中可能会有所不同,具体取决于您的项目结构和需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值