发布处理方案 —— 前台项目构建与发布处理

目录

01: 前言

02: 域名、DNS、公网IP、服务器、Nginx之间的关系

03: 阿里云服务器购买指南 

04: 服务器连接方式

05: Nginx 环境处理

06: 项目发布 

07: 小结

---

 

01: 前言

现在我们来看一下项目的打包和发布功能，这两个功能也就是我们本篇文章的主要功能。

对于项目打包而言，它是一个通用的功能，大家也可以理解为任何一个项目都是一样的。

server {
    #SSL 访问端口号为 443
    listen 443 ssl;
    #填写绑定证书的域名
    server_name front.lgdsunday.club;
    #证书文件名称
    ssl_certificate front.lgdsunday.club_bundle.crt;
    #私钥文件名称
    ssl_certificate_key front.lgdsunday.club.key;
    ssl_session_timeout 5m;
    #请按照以下协议配置
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;
    #打包之后的项目在服务器中的存放路径
    root /sunday/front/dist/;
    #charset koi8-r;

    access_log logs/host.access.log main;

    #用来处理单页应用的切换
    location / {
        # index index.html index.htm
        try_files $uri $uri/ /index.html
    }

    # 反向代理，解决跨域问题（单独代理请求到服务端）
    location /prod-api/ {
        proxy_pass http://39.105.131.75:3005/api/;
        # $host 变量，Host 为变量名
        proxy_set_header  Host             $host;                      #域名转发
        proxy_set_header  X-Real-IP        $remote_addr;               #IP 转发
        proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header  Cookie           $http_cookie;               # cookie 配置
    }
}

# 接口访问转发
server {
    #SSL 访问端口号为 443
    listen 443 ssl;
    #填写绑定证书的域名
    server_name api.front.lgdsunday.club;
    #证书文件名称
    ssl_certificate api.front.lgdsunday.club_bundle.crt;
    #私钥文件名称
    ssl_certificate_key api.front.lgdsunday.club.key;
    ssl_session_timeout 5m;
    #请按照以下协议配置
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;
    #charset koi8-r;
    server_name  api.front.lgdsunday.club;

    location / {
        proxy_pass http://39.105.131.75:3005/;
        proxy_cookie_domain api.front.lgdsunday.club front.lgdsunday.club;
        # $host 变量，Host 为变量名
        proxy_set_header  Host             $host;                      #域名转发
        proxy_set_header  X-Real-IP        $remote_addr;               #IP 转发
        proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header  Cookie           $http_cookie;               # cookie 配置
    }

02: 域名、DNS、公网IP、服务器、Nginx之间的关系

在处理我们的服务之前，先明确一些基本的概念，这些概念有：

1. 域名。

2. DNS：域名解析服务器。

3. 公网 IP：服务器在网络中的唯一地址。

4. 服务器：服务部署的电脑。

5. Nginx：网页服务。

03: 阿里云服务器购买指南 

产品 > 云服务器 ECS > 立即购买 > 进行 5 步云服务器购买。

1. 基础配置

        1. 付费模式 包年包月

        2. 位置

        3. 服务器规格 自己玩 1 vCPU 1 G 就可以了；公司的 至少 2 vCPU 4 G。

        4. 实例数量 1

        5. 镜像 CentOS v7.4 64位

        6. 存储 ESSD 云盘 40 G

        7. 购买时长 1年

2. 网络和安全组

        1. 按固定带宽

        2. 带宽值 看需求 看财力 10M 20M

3. 系统配置 选填 无所谓

4. 分组设置 选填 无所谓

5. 确认订单

6. 确认下单

04: 服务器连接方式

常见的连接服务器方式有三种：

1. 阿里云控制台中，进行远程连接。

        1. Workbench 远程连接。

2. 通过 SSH 工具（XShell）。

3. SSH 指令远程登录。

我们这里使用第二种，进行连接。

1. 新建会话。 

        点击 左侧会话管理 空白区域。

        输入名称、协议 SSH、主机 IP、端口 22。

        点击确定。创建好会话，会显示在左侧。

2. 连接

        双击 新建的会话。

        输入登录的用户名。默认 root。

        输入密码。

        连接成功。

05: Nginx 环境处理

CentOS 自带 yum。

1. nginx 编译时依赖 gcc 环境。 

yum -y install gcc gcc-c++

2. 安装 prce，让 nginx 支持重写功能。

yum -y install pcre*

3. 安装 zlib，nginx 使用 zlib 对 http 包内容进行 gzip 压缩。

yum -y install zlib zlib-devel

4. 安装 openssl，用于通讯加密。

yum -y install openssl openssl-devel

5. 进行 nginx 安装。

6. 创建 nginx 文件夹。

7. 进入 nginx 文件夹，下载 nginx 压缩包。

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

8. 解压 nginx。

tar -zxvf nginx-1.11.5.tar.gz

9. 进入 nginx-1.11.5 目录。

cd nginx-1.11.5

10. 检查平台安装环境。

./configure --prefix=/usr/local/nginx

11. 进行源码编译。

make

12. 安装 nginx。

make install

13. 查看 nginx 配置。

/usr/local/nginx/sbin/nginx -t

14. 制作 nginx 软连接。

15. 进入 usr/bin 目录。

cd /usr/bin

16. 制作软连接。

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

17. 接下来制作配置文件。

18. 首先进入到 nginx 的默认配置文件中。

vim /usr/local/nginx/conf/nginx.conf

19. 在最底部增加配置项（按下 i 进入 输入模式）。

include /nginx/*.conf;

20. 按下 esc 键，通过 :wq! 保存并退出。

21. 创建新的配置文件。

touch /nginx/nginx.conf

22. 进入到 /root/nginx/nginx.conf 文件。

vim /nginx/nginx.conf

23. 写入如下配置。

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

24. 通过 :wq! 保存退出。

25. 在 root/nginx 中创建 dist 文件夹。

mkdir /nginx/dist

26. 在 nginx/dist 中写入 index.html 进行测试。

27. 通过 nginx -s reload 重启服务。启动失败时可以执行下方命令后，再 nginx -s reload。

nginx -c /usr/local/nginx/conf/nginx.conf

28. nginx -t 检查配置有无错误。

29. 在浏览器中通过 127.0.0.1 测试访问。

06: 项目发布 

可以通过 XFTP 进行数据传输。

07: 小结

本章节主要讲解了一些基础的 部署 相关的知识，这些内容并不复杂，属于通用性内容。

现在我们的项目就已经可以部署到我们的服务器中了，大家可以根据自己的域名进行对应的访问了。