如何把前端项目部署至服务器

   一 前言

       通常我们在完成一个web形项目的开发后，都要把项目部署至服务器，并修改相关的配置后用户才能正常访问到它，对于大公司而言有专业的运维会帮我们完成此类事件，但对于小公司或是工作室而言并没有专门的人去做此类事件，当然如果你和后端关系好的话，后端在部署服务时不嫌麻烦就会帮你一并完成，要是关系不太融洽那就只能依靠自己了，而本篇文章主要讲述如何把打包后的项目部署至服务器，请注意本文并不涉及Jenkins等自动构建流程。

   二 重要说明

       1）环境要求：本文基于CentOS 7.6进行演示。

       2）本文会使用到Nginx，如您还未安装请参考另一篇文章 ?  在CentOs上安装Nginx  ?，在该文中详解了如何从0安装Nginx。

       3）当你阅读下文时则默认你已完成上述条件。

   三 存放项目文件

       1）打包文件准备

              基于Vue打包后项目后通常会出现一个dist目录，目录包含index.html，icon.svg，assest等文件，您的结构目录会和下图所示有所区别，这无关紧要。

           2）创建用于存放项目的目录

               使用工具链接至服务器后，使用命令进入根目录下，并创建data文件夹和web文件夹。

// 先执行该命令进入根目录
cd /

// 使用ls查看目录下是否存在data文件
ls

               执行后如下所示，我这里data目录已存在，则无需创建，当然您也可以不叫data，自由命名。

// 若果data不存在，或您想创建其它文件来存放前台文件则使用以下命令，其中data为文件夹名称可自由命名
mkdir data

// 使用cd 进入data
cd data

// 创建web文件夹和blog文件
mkdir web/blog

// 进入blog文件
cd web/blog

// 解释下：web用于存放所有前台文件，而blog代表项目名称，你可以自由定义blog这个名称

// 使用pwd查看当前路径
pwd

这是我当前的路径

       3）上传项目

                 这里使用FinalShell作为工具，其它工具大同小异，若您也打算使用该工具参考【重要说明、第二项】在该文章内有下载链接。

            将dist目录下所有文件全选，拖拽上传至服务器

       4）修改Nginx规则

           a：先使用pwd命令查看当前路径并复制

           b：进入Nginx目录配置Nginx.conf规则，双击打开下图红框所示文件

cd /etc/nginx/

找到Server模块如图1所示，添加以下内容，最后结果所图二

	  location / {
    	# 在root 后面的 /data/xxx 为之前复制的路径
	  	root /data/web/blog;
	  	index  index.html index.htm;
	  	# 如果你使用的路由规则为历史模式，那么你一定需要下面这行代码，它的作用是防止页面刷新时出现404或空白。
	  	try_files $uri $uri/ /index.html;
	  }

图一：

图二：

       5）重启Nginx

           使用以下命令重启nginx，如果没出现任何提示则代表成功，此时我们访问公网IP地址或是域名便能看到效果啦?！。

systemctl reload nginx

如果感觉本文对您有所帮助，请点个赞在走吧?