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

目录

一、前期准备工作

二、博客web端发布流程

        （一）源码拉取

        （二）修改配置

        （三）安装依赖

        （四）本地启动

        （五）发布生产

        （六）配置nginx   

        （七）访问验证

三、博客admin端发布流程

        （一）源码拉取

        （二）修改配置

        （三）安装依赖

        （四）本地启动

        （五）发布生产

        （六）配置nginx

        （七）访问验证

四、结语

---

一、前期准备工作

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

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

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开始搭建个人博客《第七期：后端服务部署教程》》)，如下图所示。

        （三）安装依赖

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

npm install

        （四）本地启动

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

npm run dev

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

        （五）发布生产

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

npm run build

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

cd /www/xiaolin_blog/

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

mkdir vue_blog_web

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

        （六）配置nginx   

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

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

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。

./usr/local/nginx/sbin/nginx -s reload

        （七）访问验证

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

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

三、博客admin端发布流程

        （一）源码拉取

        源码gitee地址：xiaolin-blog-vue-admin: 小林博客后台管理端前端工程

        （二）修改配置

        源码拉取后，打开项目开发和生产环境配置文件，修改调用的后端接口服务地址如下图所示。

        （三）安装依赖

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

pnpm install

        （四）本地启动

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

pnpm run dev

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

        （五）发布生产

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

pnpm run build

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

cd /www/xiaolin_blog/

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

mkdir vue_blog_admin

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

        （六）配置nginx

        紧接着需要修改nginx配置文件，做域名请求映射配置。

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

vim usr/local/nginx/conf/nginx.conf

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

location /admin {
     alias  /www/xiaolin_blog/vue_blog_admin/dist/;
     index  index.html;
     #重写 URL，使得所有页面都能正确访问到 index.html
     try_files $uri $uri/ /index.html;
}

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

./usr/local/nginx/sbin/nginx -s reload

        （七）访问验证

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

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

四、结语

        扫下方二维码关注或访问个人网站 https://www.xiaolin-code.com/，第一时间获取最新文章更新。 

​