部署vue项目到Linux服务器
<h2 id="案例一">案例一</h2><ul>
<li>
<p><code>vue-cli构建vue3项目，将项目上传到Linux服务器，服务器安装node，并启动vue项目</code></p>
</li>
<li>
<p>首先本地有一个vue项目，启动后可正常访问<br>
<img src="https://img2020.cnblogs.com/blog/2030337/202111/2030337-20211127235120755-1649100939.png" alt="" loading="lazy"></p>
</li>
<li>
<p>本地打包后，也可直接访问<br>
<img src="https://img2020.cnblogs.com/blog/2030337/202111/2030337-20211127235436926-1797449569.png" alt="" loading="lazy"><br>
<img src="https://img2020.cnblogs.com/blog/2030337/202111/2030337-20211127235500112-544422523.png" alt="" loading="lazy"></p>
</li>
<li>
<p>若打包后的index.html页面显示空白，需在项目的根路径下新建vue.config.js，再重新打包，参考<br>
<img src="https://img2020.cnblogs.com/blog/2030337/202111/2030337-20211127235807473-325506198.png" alt="" loading="lazy"></p>
</li>
<li>
<p>Linux服务器安装nodejs，参考</p>
</li>
</ul>
<pre><code># 下载node压缩包，在哪条路径下执行该命令，就会下载到哪条路径下
wget https://npm.taobao.org/mirrors/node/v12.16.1/node-v12.16.1-linux-x64.tar.gz
# 将压缩包剪切到/usr/local/bin/路径下，并解压
tar -xvf node-v12.16.1-linux-x64.tar.gz
# 修改文件夹名称为NodeJs
mv node-v12.16.1-linux-x64 NodeJs
# 安装gcc
yum install gcc gcc-c++
# 在/usr/local/bin/NodeJs/bin路径下有三个文件：nodenpmnpx
# 为这三个文件设置软连接，/usr/bin目录用于存放系统命令，此时在任意路径下执行：node相当于是执行/usr/local/bin/NodeJs/bin/node路径下的文件，执行node后会进入node环境
ln -s /usr/local/bin/NodeJs/bin/node /usr/bin/node
ln -s /usr/local/bin/NodeJs/bin/npm /usr/bin/npm
ln -s /usr/local/bin/NodeJs/bin/npx /usr/bin/npx
# 进入根目录
cd
# 验证
node
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/2030337/202111/2030337-20211128002059358-1797874475.png" alt="" loading="lazy"></p>
<ul>
<li>将vue项目上传到Linux服务器，编译运行</li>
</ul>
<pre><code># 进入vue项目的根目录
cd /home/web
# 安装依赖
npm install
# 编译打包
npm run build
# 启动项目
npm run serve
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/2030337/202111/2030337-20211128000749747-359426419.png" alt="" loading="lazy"></p>
<ul>
<li>测试<br>
<img src="https://img2020.cnblogs.com/blog/2030337/202111/2030337-20211128000825742-1558976301.png" alt="" loading="lazy"></li>
</ul>
<h4 id="错误总结">错误总结</h4>
<ul>
<li>在Linux服务器上编译项目时报错如下，说明node版本过低，参考<br>
<img src="https://img2020.cnblogs.com/blog/2030337/202111/2030337-20211128001126287-292365071.png" alt="" loading="lazy"></li>
<li>在Linux服务器上编译项目时报错如下，说明node版本17.1.0过高<br>
<img src="https://img2020.cnblogs.com/blog/2030337/202111/2030337-20211128001227918-2009144331.png" alt="" loading="lazy"></li>
<li>解决方案，参考</li>
</ul>
<pre><code># 若之前使用yum安装的node，需卸载后重新安装，安装步骤参考本篇博客中使用`源码包`的方法安装
# 卸载nodejs
yum remove nodejs npm -y
# 进入 /usr/local/lib 删除所有 node 和 node_modules文件夹
# 进入 /usr/local/include 删除所有 node 和 node_modules 文件夹
# 进入 /usr/local/bin 删除 node 的可执行文件
</code></pre>
<ul>
<li>若编译、启动项目时报错<code>权限不足</code><br>
<img src="https://img2020.cnblogs.com/blog/2030337/202111/2030337-20211128001828561-1781115793.png" alt="" loading="lazy"></li>
<li>解决方案</li>
</ul>
<pre><code># 将指定文件设置权限
chmod 777 /home/web/xxx
</code></pre>
<ul>
<li>运行项目时报错：warnings potentially fixable with the <code>--fix</code> option</li>
<li>解决方案，将项目中package.json中"lint": "vue-cli-service lint" 修改为：eslint --fix --ext .js,.vue src<br>
<img src="https://img2020.cnblogs.com/blog/2030337/202111/2030337-20211128002738732-2001246121.png" alt="" loading="lazy"></li>
<li>参考</li>
</ul>
<h2 id="案例二">案例二</h2>
<ul>
<li><code>vue-cli构建vue3项目，打包后将dist文件放到tomcat上</code></li>
<li>Linux服务器安装tomcat</li>
</ul>
<pre><code># 用docker拉取tomcat容器
docker pull tomcat
# 后台启动
docker run -d -p 8080:8080 tomcat
# 启动后浏览器访问 http://192.168.0.102:8080/ 返回404
# 解决方案：
# 对外开放8080端口
firewall-cmd --zone=public --add-port=8080/tcp --permanent
# 重启防火墙生效
firewall-cmd --reload
# 进入tomcat容器
docker exec -it 正在运行的容器id /bin/bash
# 将webapps.dist目录下的所有文件复制到webapps路径下
cp -r webapps.dist/* ./webapps
# 删除webapps.dist目录
rm -rf webapps.dist
# 此时能通过浏览器访问到tomcat页面了，但tomcat镜像重启后依旧404，需将当前修改后的容器提交为一个新的镜像
# 不停止容器的情况下退出
ctrl + p + q
# 在容器运行状态下提交自定义的容器，tomcat10:10.1是我自定义的镜像名称和版本号
docker commit -a="作者" -m="备注" 正在运行的容器id tomcat10:10.1
# 停止当前tomcat容器
docker stop 正在运行的容器id
# 删除该容器
docker rm 运行后的容器id
# 启动自己提交的镜像
docker run -d -p 8080:8080 tomcat10:10.1
# 补充
# 启动tomcat镜像的时候报错：driver failed programming external connectivity on endpoint quirky_allen
# 错误原因：之前启动后端项目时占用了8080端口，需将后端项目结束
# 测试，访问 http://192.168.0.102:8080 看到tomcat页面说明启动成功
</code></pre>
<ul>
<li>将打包后的项目放到tomcat容器</li>
</ul>
<pre><code># 创建共享文件夹
mkdir -p /home/mydocker/mytomcat8080/data
# 启动容器8080：
docker run \
-p 8080:8080 \
--name my-tomcat8080 \
-v /home/mydocker/mytomcat8080/data:/usr/local/tomcat/webapps \
-d \
tomcat10:10.1
# 启动容器时报错：docker: invalid reference format.
# 错误原因：docker命令写错了，我这里是-v /home/mydocker/mytomcat8080/data:/usr/local/tomcat/webapps \冒号后面多了一个空格
# 进入vue项目根目录，打包后生成dist文件夹，这里我们还是使用案例一中的项目
npm install
npm run bulid
# 将打包后的文件复制到tomcat
mv dist /home/mydocker/mytomcat8080/data
# 重启tomcat容器
docker restart tomcat容器id
# 测试，本地访问 http://192.168.0.102:8080/dist/
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/2030337/202111/2030337-20211128103323751-1347115096.png" alt="" loading="lazy"><br>
<img src="https://img2020.cnblogs.com/blog/2030337/202111/2030337-20211128103123770-1741382374.png" alt="" loading="lazy"></p>
<h2 id="案例三">案例三</h2>
<ul>
<li><code>使用nginx动静分离的特性，转发到vue项目打包后的dist/index.html</code></li>
<li>docker安装nginx，参考</li>
</ul>
<pre><code># 拉取镜像到本地
docker pull nginx
# 启动镜像，创建一个实例：
docker run --name my-nginx -p 80:80 -d nginx
# 宿主机创建共享文件夹：
mkdir -p /home/mydocker/mynginx/conf/conf.d
mkdir -p /home/mydocker/mynginx/html
mkdir -p /home/mydocker/mynginx/logs
# 将容器中的配置文件复制到共享文件夹：
docker cp 正在运行的容器id:/etc/nginx/nginx.conf /home/mydocker/mynginx/conf
docker cp 正在运行的容器id:/etc/nginx/conf.d /home/mydocker/mynginx/conf
docker cp 正在运行的容器id:/usr/share/nginx/html /home/mydocker/mynginx
# 拷贝完之后就停止并删除容器
docker stop 容器id
docker rm 容器id
# 重新启动一个新的容器
docker run -p 80:80 --name my-nginx --restart=always -v /home/mydocker/mynginx/conf/nginx.conf:/etc/nginx/nginx.conf -v
/home/mydocker/mynginx/conf/conf.d:/etc/nginx/conf.d -v /home/mydocker/mynginx/html:/usr/share/nginx/html -v /home/mydocker/mynginx/logs:/var/log/nginx -d nginx
# 自定义一个index.html，使用pscp传输到Linux，将该文件复制到/home/mydocker/mynginx/html目录，再次访问就是自定义的页面了
</code></pre>
<ul>
<li>配置default.conf<br>
<img src="https://img2020.cnblogs.com/blog/2030337/202111/2030337-20211128165835861-1408333094.png" alt="" loading="lazy"></li>
<li>根据以上配置信息，我们需要将vue项目打包后，生成的dist文件夹里的文件复制到如下路径<br>
<img src="https://img2020.cnblogs.com/blog/2030337/202111/2030337-20211128170336307-2143308934.png" alt="" loading="lazy"></li>
<li>浏览器测试是否部署成功<br>
<img src="https://img2020.cnblogs.com/blog/2030337/202111/2030337-20211128170422946-1799737690.png" alt="" loading="lazy"></li>
</ul>
<h4 id="补充">补充</h4>
<ul>
<li>部署原理：vue项目打包后生成的dist文件夹其实就可以直接访问了，nginx只是将请求转发到Linux服务器的静态文件</li>
<li>查看nginx配置文件：上面的localhost:80表示nginx的地址，如果nginx在一台服务器上，可通过<code>http://服务器ip:80</code>访问到nginx</li>
<li>下面的<code>root</code>则表示访问nginx时，会转发到该路径下的index.html页面，也就是说我们可以随意转发到Linux服务器的静态文件<br>
<img src="https://img2020.cnblogs.com/blog/2030337/202111/2030337-20211128171013970-1328102380.png" alt="" loading="lazy"></li>
<li>而我最开始配置转发路径后却没有找到，下面进行错误还原</li>
<li>首先我有一个vue项目，编译打包后是如下路径<br>
<img src="https://img2020.cnblogs.com/blog/2030337/202111/2030337-20211128171917324-1080498985.png" alt="" loading="lazy"></li>
<li>再配置一下nginx，最开始一看是没有问题的<br>
<img src="https://img2020.cnblogs.com/blog/2030337/202111/2030337-20211128172259482-317001835.png" alt="" loading="lazy"></li>
<li>重启nginx后测试，没有找到指定的文件<br>
<img src="https://img2020.cnblogs.com/blog/2030337/202111/2030337-20211128172516675-2002051111.png" alt="" loading="lazy"></li>
<li><code>错误原因：这是因为我启动的nginx是一个容器，这个容器跑在docker上，就算指定了静态文件路径，它也不能访问到宿主机上的文件的</code></li>
</ul><br><br>
来源：https://www.cnblogs.com/dogleftover/p/17786396.html
頁:
[1]