从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

1721354238090.png

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

1721354680322.png

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

二、博客web端发布流程

        (一)源码拉取

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

1721355912188.png

        (二)修改配置

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

8cb845a23d9814ae0cda0eeb6edd018.png

        (三)安装依赖

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

<code>npm install

1721375056261.png

1721358809631.png

        (四)本地启动

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

<code>npm run dev

1721359786176.png

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

1721359923284.png

        (五)发布生产

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

<code>npm run build

1721370373099.png

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

<code>cd /www/xiaolin_blog/

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

mkdir vue_blog_web

1721371023212.png

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

image.png

        (六)配置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;

}

aa9d264be3917ae358dfd7acd71adb0.png

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

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

1719996305773.png

        (七)访问验证

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

1721373858544.png

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

三、博客admin端发布流程

        (一)源码拉取

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

1721356179614.png

        (二)修改配置

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

1721374782839.png

        (三)安装依赖

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

<code>pnpm install

1721375487778.png

1721358809631.png

        (四)本地启动

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

<code>pnpm run dev

1721375794328.png

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

1721375982766.png

        (五)发布生产

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

<code>pnpm run build

image.png

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

<code>cd /www/xiaolin_blog/

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

mkdir vue_blog_admin

1721376813965.png

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

1721377056961.png

        (六)配置nginx

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

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

<code>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;

}

1721377419041.png

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

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

1719996305773.png

        (七)访问验证

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

1721377750249.png

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

四、结语

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



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。