从0开始搭建个人博客《第八期：前端服务部署》

小林的编程之旅 2024-09-04 08:33:01 阅读 76

一、前期准备工作

二、博客web端发布流程

（一）源码拉取

（二）修改配置

（三）安装依赖

（四）本地启动

（五）发布生产

（六）配置nginx

（七）访问验证

三、博客admin端发布流程

（一）源码拉取

（二）修改配置

（三）安装依赖

（四）本地启动

（五）发布生产

（六）配置nginx

（七）访问验证

四、结语

一、前期准备工作

因为是vue项目，编译和发布需要用到node.js，所以需要到node.js官网进行下载安装。这里需要注意的是node.js的版本，版本太低或太高，可能会导致编译和发布失败。博主这里安装的版本是v18.20.2。

Windos系统在CMD命令行输入以下命令查看本机安装的node.js版本（有安装过的情况）。

<code>node -v

node.js官网下载地址：https://nodejs.org/zh-cn/download/package-manager

开发工具使用webstorm或者vscode都行，以下教程以webstorm为例。

二、博客web端发布流程

（一）源码拉取

源码gitee地址：https://gitee.com/linjiangxx/xiaolin-blog-vue-wed

（二）修改配置

源码拉取后，打开项目开发和生产环境配置文件，修改调用的后端接口服务地址(ps:后端服务不清楚怎么部署的，请查阅往期文章《从0开始搭建个人博客《第七期：后端服务部署教程》》)，如下图所示。

（三）安装依赖

修改完配置后，打开命令行终端，输入以下命令安装项目依赖包。

<code>npm install

（四）本地启动

项目安装完依赖包后，如果要进行本地开发启动，需要输入以下命令。

<code>npm run dev

启动完成后，打开浏览器访问打印出来的地址 http://localhost:5173/。ps：需要先启动后端服务，不然页面访问会报错。

（五）发布生产

如果要发布生产环境，则输入以下指令，对项目进行打包。打包完成后会在项目根目录下生成一个dist文件夹。

<code>npm run build

首先，登录服务器，使用以下命令进入/www/xiaolin_blog （上一期部署后端服务的时候建的）目录下。

<code>cd /www/xiaolin_blog/

在该目录下新建一个目录 vue_blog_web 用于存放web端项目打包好的dist文件。

mkdir vue_blog_web

将项目打包好的dist整个文件夹复制并上传到新建的目录下。

（六）配置nginx

紧接着需要修改nginx配置文件，做域名请求映射配置。(ps:没有安装nginx的，请查阅往期文章《从0开始搭建个人博客《第六期：Nginx与SSL证书安装》》)。

输入以下命令打开nginx配置文件。

<code>vim usr/local/nginx/conf/nginx.conf

找到https配置，添加以下web端资源访问映射配置，编辑好后，按键盘ESC键，然后输入:wq 保存退出。

location / {

root /www/xiaolin_blog/vue_blog_web/dist;

index index.html index.htm;

#重写 URL，使得所有页面都能正确访问到 index.html

try_files $uri $uri/ /index.html;

}

修改nginx配置后，输入以下命令重启nginx。

<code>./usr/local/nginx/sbin/nginx -s reload

（七）访问验证

最后，打开浏览器，在地址栏输入自己申请的和服务器绑定域名地址 https://你的域名，看是否正常访问到web端页面。

至此，博客web端发布上线完成。