nginx部署前端项目详细教程

1.背景

在很多年前,那时候还是前后端不分离的时代,没有专门的前端工程师,或者说前端工程师并不太需要自己去部署网站,一般都是把这部分事情交给后端工程师或者运维工程师处理就可以。
进入前后端分离的时代之后,这一切都变了。前端工程师很有可能需要自己部署前端项目,然而前端工程师一般很少接触到服务器等知识,所以部署网站时总是出现问题。

2.准备工作

一个前端项目 + 一台服务器。
前端项目可以很简单,可以是一个空脚手架,甚至可以只是一个html文件。服务器则可以去阿里/华为/京东等官网去租用(怎么租用或者购买满足自己需求的服务器可以直接百度或者在官网看相关文档,这一块我发现有些朋友不太会,后续我写个教程)。

3.初始化项目

直接用vue脚手架新建一个项目(后续将都以该项目为例)。

 vue create first-project

按dos提示执行以下命令

 cd first-project && npm run serve

用浏览器访问http://localhost:8080,如下,说明前端项目已经准备完毕。

4.在服务器安装Nginx

Nginx是一款轻量级的Web服务器和反向代理服务器,由于它的内存占用少,启动极快,高并发能力强,在互联网项目中广泛应用,我们的网站经常部署到Nginx服务器上(当然也可以选择其它web服务器)。
我租的服务器是阿里云Centos系统,所以下面将以Centos为例,其它服务器道理与此类似。

4.1 判断服务器是否安装Nginx

先登录阿里云平台,找到自己租用的服务器界面,进行远程连接,连接成功之后,使用以下命令判断服务器是否安装Nginx:

 whereis nginx

如果出现如下界面，则代表未安装Nginx:

由于我的服务器已经安装Nginx,所以出现以下界面(显示Nginx安装路径):