云计算：Ubuntu下Vue+Springboot前后端分离项目部署（多节点）
<h2 id="一机器准备">一、机器准备</h2><p>首先准备三台机器：<br>
我是一台WINDOWS系统主机，在WINDOWS里的 VMware 中安装两台Ubuntu系统虚拟机</p>
<p>如果你的虚拟机只有 CentOS，可以参考这篇文章：https://www.cnblogs.com/qwg-/p/13237210.html</p>
<h3 id="vmware-中如何克隆虚拟机">VMware 中如何克隆虚拟机</h3>
<p>右键点击你的原虚拟机，选择管理 ----> 克隆</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321021742645-1538019515.png" alt="" loading="lazy"></p>
<p>我创建的是完整克隆，根据自身情况选择存放路径</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321021758930-1960255664.png" alt="" loading="lazy"></p>
<p>以下是分布式部署项目的机器结构</p>
<p>（三台主机需要连接同一个WLAN）</p>
<table>
<thead>
<tr>
<th>主机名</th>
<th>负责部署</th>
<th>IP地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>ytt132</td>
<td>前后端</td>
<td>192.168.193.129</td>
</tr>
<tr>
<td>ytt132_02</td>
<td>访问</td>
<td>192.168.193.130</td>
</tr>
<tr>
<td>WINDOWS</td>
<td>数据库</td>
<td>192.168.0.107</td>
</tr>
</tbody>
</table>
<h3 id="如何查询机器ip地址">如何查询机器IP地址</h3>
<ol>
<li>
<p>查询当前 Ubuntu 虚拟机（ytt132）的IP地址</p>
<p>(1) 打开终端</p>
<p>(2) 输入 <code>ifconfig</code></p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321021911223-1398612781.png" alt="" loading="lazy"></p>
</li>
<li>
<p>查询WINDOWS主机的IP地址</p>
<p>(1) WIN键 + R打开“运行”</p>
<p>(2) 输入 <code>cmd</code> 打开 “命令提示符”</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022159344-501472723.png" alt="" loading="lazy"></p>
<p>(3) 输入 <code>ipconfig</code> 查询，WLAN下的IPv4地址即本机的IP地址，我的是192.168.0.107</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022204775-897762051.png" alt="" loading="lazy"></p>
</li>
</ol>
<h2 id="二项目准备">二、项目准备</h2>
<p>WINDOWS ：</p>
<p>准备一个 VUE+SPINGBOOT 项目，在IDEA中打开，并且能够成功运行</p>
<p>本人使用的项目是一个基于Vue框架的前端（项目名CRUDDemo）和一个基于SpringBoot框架的后端（项目名CRUDServer02）</p>
<h5 id="运行要求">运行要求</h5>
<p>前端：安装好npm、Vue</p>
<p>后端：安装好Maven</p>
<h2 id="三前端部署">三、前端部署</h2>
<h3 id="前端准备">前端准备</h3>
<p>先安装 nginx 代理服务器</p>
<p>nginx 简介：https://www.runoob.com/w3cnote/nginx-setup-intro.html</p>
<h4 id="安装方法一建议使用">安装方法一（建议使用）</h4>
<h5 id="1-在终端中输入命令">1. 在终端中输入命令：</h5>
<pre><code>sudo apt-get install nginx
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321101410109-216859889.png" alt="" loading="lazy"></p>
<h5 id="2-输入-nginx--v-查看是否安装成功出现版本号即安装成功">2. 输入 <code>nginx -v</code> 查看是否安装成功，出现版本号即安装成功</h5>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321021845054-2012371564.png" alt="" loading="lazy"></p>
<h5 id="3-启动-nginx-服务">3. 启动 nginx 服务：</h5>
<pre><code>sudo service nginx start
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321021857838-770455063.png" alt="" loading="lazy"></p>
<p>补充两个 nginx 操作：</p>
<pre><code>sudo service nginx stop # 停止nginx服务
</code></pre>
<pre><code>sudo service nginx restart # 重启nginx服务
</code></pre>
<h5 id="4-在浏览器地址栏输入本机ip地址若出现以下欢迎界面即安装成功">4. 在浏览器地址栏输入本机IP地址，若出现以下欢迎界面即安装成功</h5>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321021919213-1786899844.png" alt="" loading="lazy"></p>
<h4 id="其他安装方法">其他安装方法</h4>
<p>其他安装方法参考：https://blog.csdn.net/qq_23832313/article/details/83578836</p>
<h3 id="前端打包">前端打包</h3>
<h5 id="1-修改url根据个人项目情况操作">1. 修改URL（根据个人项目情况操作）</h5>
<p>先检查项目文件中有没有使用 http://localhost:xxxx/ 这种URL进行 POST 和 GET 方法的语句（可以使用 CTRL + F 搜索 'localhost' 来查找），我是写在了vue文件中的</p>
<p>因为 localhost 指的是本地IP地址，与 127.0.0.1 一样，所以使用外部主机访问该URL时是无法进行远程访问的</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321101446931-2130536654.png" alt="" loading="lazy"></p>
<p>因此，我们要把所有 localhost 修改为你用来部署前后端的主机IP，例如我使用的是 ytt132端 部署的前后端，刚刚已经查询过为192.168.193.129</p>
<p>复制该IP后，将其粘贴并替换vue中所有带 localhost 的URL地址</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321021936432-1361251426.png" alt="" loading="lazy"></p>
<h5 id="2-开始打包">2. 开始打包</h5>
<p>修改完成后，打开终端 Terminal ，输入 <code>npm run build</code> （注意项目路径）</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321021942731-1290184790.png" alt="" loading="lazy"></p>
<p>项目资源管理窗口中出现 dist 文件夹即打包完成</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321021952649-200030428.png" alt="" loading="lazy"></p>
<p>在文件资源管理器中打开 dist 文件夹所在位置，对其进行压缩</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321021957985-636866055.png" alt="" loading="lazy"></p>
<p><strong>注：若你传输文件的常用方式为共享文件夹，则不用压缩和解压，可以直接上传文件夹</strong></p>
<h5 id="3-上传文件">3. 上传文件</h5>
<p>将 dist.zip 压缩文件发送到将要部署前后端的虚拟机（ytt132）中</p>
<p>（可以用 SSH 连接主机和虚拟机或者 空投 等方式传文件）</p>
<p>本人喜欢用空投嘻嘻：AirPortal 空投快传</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022005148-538274971.png" alt="" loading="lazy"></p>
<p>上传成功！</p>
<p>找一个地方存放打包好的前端文件夹，我是在 /usr/local 下新建文件夹 project 专门存放前后端打包文件</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022011193-60436971.png" alt="" loading="lazy"></p>
<p>新建文件夹命令</p>
<pre><code>sudo mkdir /usr/local/project
</code></pre>
<h5 id="4-解压文件">4. 解压文件</h5>
<p>将dist.zip压缩文件解压到/usr/local/project目录下</p>
<p>解压zip文件命令：</p>
<pre><code>sudo unzip -d /usr/local/project ~/下载/dist.zip
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022016782-533468467.png" alt="" loading="lazy"></p>
<h3 id="前端配置">前端配置</h3>
<p>配置文件具体位置如图：</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321102514660-1515289916.png" alt="" loading="lazy"></p>
<p>使用apt工具安装 nginx 的配置文件在 /etc/nginx/nginx.conf</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022022495-519228646.png" alt="" loading="lazy"></p>
<p>但在 nginx.conf 文件里有一条这样的语句，它引用了 /etc/nginx/sites-enabled 下所有文件中的内容</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022026840-1609544656.png" alt="" loading="lazy"></p>
<p>进入 /etc/nginx/sites-enabled 目录，可以看到目录下只有一个 default 文件</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022032700-826873877.png" alt="" loading="lazy"></p>
<p>所以我们需要对该 default 文件进行前端配置</p>
<h5 id="1-修改配置文件">1. 修改配置文件</h5>
<pre><code>sudo gedit default
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022040449-1381661986.png" alt="" loading="lazy"></p>
<p>在server中添加如下语句：</p>
<pre><code>root /usr/local/project/dist; # 前端打包文件夹所在位置 # 注意要分号
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022047419-859851812.png" alt="" loading="lazy"></p>
<p>保存 default 文件即前端配置完成！</p>
<h5 id="2-重启nginx服务">2. 重启nginx服务</h5>
<pre><code>sudo service nginx restart
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022052357-1853599935.png" alt="" loading="lazy"></p>
<p>前端部署成功</p>
<h2 id="四数据库部署">四、数据库部署</h2>
<p>WINDOWS：</p>
<h3 id="运行-navicat-premium">运行 navicat premium</h3>
<h5 id="1-打开-localhost_3306-连接">1. 打开 localhost_3306 连接</h5>
<p>右键选择新建数据库，数据库命名要与后端项目src/main/resources/application.properties中url里的数据库名对应</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022101974-1946907569.png" alt="" loading="lazy"></p>
<p>例如我的是 cruddemo_db</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022106503-480068587.png" alt="" loading="lazy"></p>
<h5 id="2-双击打开数据库">2. 双击打开数据库</h5>
<h5 id="3-运行数据库文件">3. 运行数据库文件</h5>
<p>接下来是运行你的数据库文件，如果是 sql文件 的话直接右键运行 sql文件</p>
<p>以下是还原 nb3备份文件 的步骤：</p>
<p>右键备份，选择还原备份从...</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022112410-1999902615.png" alt="" loading="lazy"></p>
<p>点击 “还原” ，完成后直接关闭</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022119441-1257964264.png" alt="" loading="lazy"></p>
<p>数据表导入完成</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022126161-1920906727.png" alt="" loading="lazy"></p>
<h5 id="4-修改用户权限">4. 修改用户权限</h5>
<p>在数据库开启的状态下，点击上方菜单栏中的用户</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022133204-2025605482.png" alt="" loading="lazy"></p>
<p>双击 ‘ root@localhost ’ 进入root用户设置界面，将主机名从localhost修改为%（表示所有用户可连接）</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022138267-1391942970.png" alt="" loading="lazy"></p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022142617-1446847861.png" alt="" loading="lazy"></p>
<p>至此，数据库配置完成</p>
<h2 id="五后端部署">五、后端部署</h2>
<h3 id="后端打包">后端打包</h3>
<p>（确保maven插件已安装，并且项目能够成功运行）</p>
<p>在 src/main/resources 目录下找到 application.properties ，这是编写连接数据库代码的文件，找到项目对应的数据库名字，我这里是 cruddemo_db</p>
<p>该文件中有几个要注意的参数</p>
<ul>
<li>
<p>server.port：后端运行的端口号</p>
</li>
<li>
<p>spring.datasource.url：连接MYSQL数据库</p>
</li>
<li>
<p>username：MYSQL用户名</p>
</li>
<li>
<p>password：MYSQL密码</p>
</li>
</ul>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022152747-310158425.png" alt="" loading="lazy"></p>
<p>（可以使用自行设置的端口号，但要保证虚拟机在运行后端时没有相同端口号的进程在运行）</p>
<p>在后面的配置文件中也会使用到这个端口号</p>
<p><strong>这里url地址要将 localhost 修改为你要进行部署数据库的主机IP地址，即 WINDOWS端 的IP地址</strong></p>
<h5 id="1-修改后端url的ip地址">1. 修改后端url的IP地址</h5>
<p>并检查 username 和 password 是否和你的 MYSQL 连接的用户名和密码相同</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022212363-2041902709.png" alt="" loading="lazy"></p>
<p>检查无误后开始打包</p>
<h5 id="2-开始打包-1">2. 开始打包</h5>
<p>点开右侧边栏中的 Maven，按照以下目录选择 clean、compile、package，然后点击上方的绿色三角运行打包</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022217040-1461158549.png" alt="" loading="lazy"></p>
<p>打包成功界面</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022221532-158781111.png" alt="" loading="lazy"></p>
<p>打包出来的文件在项目的 target 目录下，是一个jar包</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022227222-779935477.png" alt="" loading="lazy"></p>
<h5 id="3-上传文件-1">3. 上传文件</h5>
<p>将这个jar包上传到部署前后端的虚拟机上（ytt132）</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022233367-249219028.png" alt="" loading="lazy"></p>
<h3 id="后端配置">后端配置</h3>
<p>再次进入 /etc/nginx/sites-enabled 目录，对default文件进行后端配置</p>
<pre><code>sudo gedit default
</code></pre>
<p>在 location 中添加如下语句：</p>
<pre><code>proxy_pass http://192.168.193.129:8081; # 192.168.193.129为当前主机IP，8081为后端部署的端口
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022244213-342218034.png" alt="" loading="lazy"></p>
<p>注：若后面后端运行失败，连虚拟机本地都不能访问WEB的话，尝试在default文件中注释原来的location，并在后面添加以下代码：</p>
<pre><code>location^~ /prod-api/ {
proxy_pass http://192.168.193.129:8081/; # 192.168.193.129为当前主机IP，8081为后端部署的端口
}
</code></pre>
<p>（只是修改了location方法头）</p>
<p>保存 default 文件即后端配置完成</p>
<h3 id="后端运行">后端运行</h3>
<h5 id="1-运行jar包">1. 运行jar包</h5>
<p>在jar包所在目录下运行以下命令</p>
<pre><code>java -jar crud-demo-0.0.1-SNAPSHOT.jar
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022251119-653946622.png" alt="" loading="lazy"></p>
<h5 id="2-重启-nginx-服务">2. 重启 nginx 服务</h5>
<pre><code>sudo service nginx restart
</code></pre>
<h5 id="3-访问服务">3. 访问服务</h5>
<p>在浏览器中输入本机IP访问</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022259675-6299677.png" alt="" loading="lazy"></p>
<p>后端数据成功显示，前后端部署完成</p>
<h6 id="注">注：</h6>
<p>在后端运行过程中可以输入 CTRL+Z 终止运行</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022307408-333614103.png" alt="" loading="lazy"></p>
<p>但这样并未真正终止进程，再次运行可能会出现以下报错：</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022310793-1594868296.png" alt="" loading="lazy"></p>
<p>终端里输入 <code>sudo netstat -anutp | grep 8081</code> 查看占用了8081端口的进程PID：3963</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022314911-126790901.png" alt="" loading="lazy"></p>
<p>杀死该进程PID号</p>
<pre><code>kill -9 3963
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022320321-122348999.png" alt="" loading="lazy"></p>
<p>重新运行jar包成功</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022326128-1897106108.png" alt="" loading="lazy"></p>
<h2 id="六外部访问">六、外部访问</h2>
<p>最后，要在外部主机访问WEB服务，本人是在 ytt132_02端 进行访问的</p>
<p>打开另一个虚拟机的浏览器，输入 ytt132 (部署前后端)的IP地址：http://192.168.193.129/</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022332210-501199129.png" alt="" loading="lazy"></p>
<p>成功访问！</p>
<h2 id="防火墙问题">防火墙问题</h2>
<p>可以使用 <code>ping 对方主机IP地址</code> 来测试两台主机能否连接</p>
<p><img src="https://img2022.cnblogs.com/blog/2765564/202203/2765564-20220321022336710-1195801050.png" alt="" loading="lazy"></p>
<p>若两台机器之间无法ping通，检查一下ping的那台机器是否开启了防火墙，很有可能是防火墙阻挡了外部访问你的IP</p>
<p>WINDOWS打开或关闭 Microsoft Defender 防火墙：https://support.microsoft.com/zh-cn/windows/打开或关闭-microsoft-defender-防火墙-ec0844f7-aebd-0583-67fe-601ecf5d774f</p>
<p>Ubuntu防火墙常用命令：</p>
<pre><code>sudo ufw status # 查看防火墙活动状态
</code></pre>
<pre><code>sudo ufw allow 3306 # 开放防火墙3306端口，也可以把8081端口也开放
</code></pre>
<pre><code>sudo ufw enable # 开启防火墙
</code></pre>
<pre><code>sudo ufw reload # 重启防火墙
</code></pre>
<pre><code>sudo ufw disable # 关闭防火墙
</code></pre><br><br>
来源：https://www.cnblogs.com/DingyLand/p/yunjisuan_01_.html
頁:
[1]