102、项目部署通用方案

之前用过阿里巴巴的云效（codeup）管理代码及部署，通过搭建流水线的方式，前端提交完代码之后(前端提交代码时不用 npm run build)，可以按照简单的步骤将前端代码打包、发布(包括开发环境、测试环境)。

一、为什么需要打包项目？

浏览器只能识别并运行 html、css、js 文件 。

那么换句话而言，项目中的 .vue 文件，浏览器是不认识的。

而打包的过程就是把 .vue 的 单文件组件 打包成 html、css、js 的文件，让浏览器进行识别，并展示我们的项目

二、打包后的项目可以直接使用浏览器访问吗？

通过 npm run build 打包项目之后，打包的文件会被放入到 dist 文件夹中，其实我们可以直接双击 index.html 文件，可以发现，浏览器是无法显示项目的。

F12 查看控制台，发现抛出了很多错误。根据错误可以知道，无法显示项目的原因是一些文件找不到。

文件找不到的原因是我们打开 dist 下的 index.html 文件，在浏览器的 URL 其实是一个 file 协议，对应着的文件路径就会变成盘符下的 xxx,在我们当前的盘符下没有对应的文件，项目自然是无法访问的。

三、为什么需要服务？

项目需要通过一个服务托管，从而避免出现模块无法被找到等原因。

四、明确域名、DNS、公网 IP、服务器、Nginx 之间的关系

域名：https://.baidu.com
DNS：域名解析服务器
公网 IP：服务器在网络中的唯一地址
服务器：服务部署的电脑
Nginx：网页服务

五、服务器的连接方式

常见的连接服务器方式：
1、云商控制台中进行远程链接
2、SSH 工具（XShell）
3、SSH 指令远程登录

SSH 工具-XShell

1、新建会话
2、确定会话信息，协议为 SSH、主机为服务器 IP、端口号为 22
3、双击会话进行连接
4、输入用户名（默认为 root）
5、输入密码

Nginx 环境处理

nginx 编译时依赖 gcc 环境
1
yum -y install gcc gcc-c++
安装 prce，让 nginx 支持重写功能
1
yum -y install pcre*
安装 zlib，nginx 使用 zlib 对 http 包内容进行 gzip 压缩
1
yum -y install zlib zlib-devel
安装 openssl，用于通讯加密
1
yum -y install openssl openssl-devel
进行 nginx 安装
创建 nginx 文件夹

下载 nginx 压缩包

1	`wget https://nginx.org/download/nginx-1.11.5.tar.gz`

解压 nginx
1
tar -zxvf nginx-1.11.5.tar.gz
进入 nginx-1.11.5 目录
1
cd nginx-1.11.5
检查平台安装环境
1
./configure --prefix=/usr/local/nginx
进行源码编译
1
make
安装 nginx
1
make install
查看 nginx 配置
1
/usr/local/nginx/sbin/nginx -t
制作 nginx 软连接
进入 usr/bin 目录
1
cd /usr/bin

制作软连接

1	`ln -s /usr/local/nginx/sbin/nginx nginx`

接下来制作配置文件
首先进入到 nginx 的默认配置文件中
1
vim /usr/local/nginx/conf/nginx.conf
在最底部增加配置项（按下 i 进入输入模式）
1
include /nginx/*.conf;
按下 esc 键，通过 :wq! 保存并退出
创建新的配置文件
1
touch /nginx/nginx.conf
进入到 /root/nginx/nginx.conf 文件
1
vim /nginx/nginx.conf

写入如下配置

server {
    # 端口
    listen       80;
    # 域名
    server_name  localhost;
    # 资源地址
    root   /nginx/dist/;
    # 目录浏览
    autoindex on;
    # 缓存处理
    add_header Cache-Control "no-cache, must-revalidate";
    # 请求配置
    location / {
        # 跨域
        add_header Access-Control-Allow-Origin *;
        # 返回 index.html
        try_files $uri $uri/ /index.html;
    }
}

通过 :wq! 保存退出
在 root/nginx 中创建 dist 文件夹
1
mkdir /nginx/dist
在 nginx/dist 中写入 index.html 进行测试
通过 nginx -s reload 重启服务
在浏览器中通过，IP 测试访问

Jude's blog