从0到1部署前端项目

本文以vue项目为例，将其部署到远程服务器中，使得可以通过远程服务器访问到我们开发的项目

keywords：nginx、vue、项目部署；

1、创建vue项目（已有项目则可忽略）

使用 vue 脚手架创建一个 vue 项目

npm install @vue/cli	# 安装vue脚手架
# 创建vue项目
vue create my-project

根据终端提示选择vue的版本即可，选择完成后，等待创建项目，完成后显示如下：

进入项目目录并执行npm run serve即可启动项目，项目默认启动在本地8080端口，通过浏览器 localhost:8080 即可访问，访问成功界面如下：

2、安装nginx

在服务器or本地安装nginx，本文以服务器为例；
首先，使用SSH命令连接到服务器：在终端输入 ssh username@hostname，username为你的主机名，hostname为服务器的域名或ip地址，执行命令后终端会提示输入密码，这个时候输入你的密码即可；如下：

成功进入服务器后，我们开始安装 nginx，执行命令 yum install nginx，如下：
（ps：以上是Linux系统的命令，如果是macos或window需要执行对应的命令去安装）

安装成功显示如下：
执行nginx -V 可以查看nginx的安装信息，包括版本、安装目录、配置文件目录等，如下：

nginx默认监听 80 端口，因此在浏览器地址栏直接输入 http://服务器ip:80 就可以访问到nginx首页，输入后回车如果出现以下界面，则表示成功

3、部署项目

完成上述准备工作后，就可以将自己的项目部署到服务器中了！！！

（1）生成项目打包文件
在第一步创建的vue项目根目录下执行 npm run build，生成打包后的文件，默认是在根目录下的 dist 文件夹下，如下：

（2）将项目放到服务器中
将dist目录下的所有文件复制到服务器中，任何位置都可以，我放在 /data/test-vue 目录下了（方式自选，可以用sftp命令、scp命令等等复制文件到服务器，我用的scp）

（3）修改nginx配置文件
使用nginx -V命令查看nginx配置文件的位置，一般在 /etc/nginx/nginx.conf，查看配置文件内容 cat /etc/nginx/nginx.conf 如下：

图中红框部分即为nginx监听的服务配置，部分含义如下：

• listen：nginx监听的端口号；
• server_name：匹配的域名或ip，当访问的域名或ip匹配时使用该server的配置；
• root：服务/项目的根目录；
• error_page：出错的页面；
• location：定义URI的处理规则；

根据上述含义，不难看出，我们只需将上述 root 字段修改为我们项目的根目录即可，端口号也可以自定义，那么当访问 http://ip:8087 时就会默认返回项目根目录下的index.html 文件；即将 root 的值设为 /data/test-vue（对应你自己的项目根目录），如下：

接着执行 nginx -t 查看配置文件是否有误，并重新加载配置文件 nginx -s reload
浏览器中通过 http://服务器ip或域名:端口号即可访问到项目；

至此，我们就成功将项目部署到了远程服务器！！！

实际上，真实开发中，还会在nginx上配置各种URI处理方式，包括反向代理、负载均衡等等，感兴趣的朋友可以查看nginx官方文档进行学习~~