本文主要是介绍发布处理方案 —— 前台项目构建与发布处理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
目录
01: 前言
02: 域名、DNS、公网IP、服务器、Nginx之间的关系
03: 阿里云服务器购买指南
04: 服务器连接方式
05: Nginx 环境处理
06: 项目发布
07: 小结
01: 前言
现在我们来看一下项目的打包和发布功能，这两个功能也就是我们本篇文章的主要功能。
对于项目打包而言，它是一个通用的功能，大家也可以理解为任何一个项目都是一样的。
server {#SSL 访问端口号为 443listen 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.htmtry_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 访问端口号为 443listen 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-devel4. 安装 openssl，用于通讯加密。
yum -y install openssl openssl-devel5. 进行 nginx 安装。
6. 创建 nginx 文件夹。
7. 进入 nginx 文件夹，下载 nginx 压缩包。
wget https://nginx.org/download/nginx-1.11.5.tar.gz8. 解压 nginx。
tar -zxvf nginx-1.11.5.tar.gz9. 进入 nginx-1.11.5 目录。
cd nginx-1.11.510. 检查平台安装环境。
./configure --prefix=/usr/local/nginx11. 进行源码编译。
make12. 安装 nginx。
make install13. 查看 nginx 配置。
/usr/local/nginx/sbin/nginx -t14. 制作 nginx 软连接。
15. 进入 usr/bin 目录。
cd /usr/bin16. 制作软连接。
ln -s /usr/local/nginx/sbin/nginx nginx17. 接下来制作配置文件。
18. 首先进入到 nginx 的默认配置文件中。
vim /usr/local/nginx/conf/nginx.conf19. 在最底部增加配置项（按下 i 进入 输入模式）。
include /nginx/*.conf;20. 按下 esc 键，通过 :wq! 保存并退出。
21. 创建新的配置文件。
touch /nginx/nginx.conf22. 进入到 /root/nginx/nginx.conf 文件。
vim /nginx/nginx.conf23. 写入如下配置。
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.htmltry_files $uri $uri/ /index.html;}
}24. 通过 :wq! 保存退出。
25. 在 root/nginx 中创建 dist 文件夹。
mkdir /nginx/dist26. 在 nginx/dist 中写入 index.html 进行测试。
27. 通过 nginx -s reload 重启服务。启动失败时可以执行下方命令后，再 nginx -s reload。
nginx -c /usr/local/nginx/conf/nginx.conf28. nginx -t 检查配置有无错误。
29. 在浏览器中通过 127.0.0.1 测试访问。
06: 项目发布
可以通过 XFTP 进行数据传输。
07: 小结
本章节主要讲解了一些基础的 部署 相关的知识，这些内容并不复杂，属于通用性内容。
现在我们的项目就已经可以部署到我们的服务器中了，大家可以根据自己的域名进行对应的访问了。
这篇关于发布处理方案 —— 前台项目构建与发布处理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
