项目构建

很多时候，我们的项目构建好之后，不想与后端一起部署，可以前端通过nginx来部署自己的代码、

通过 npm run build 打包项目之后，打包文件会被放入 dist文件夹，我们部署dist 文件夹的内容。

通过远程连接的方式，连接远程服务器

nginx 环境处理

nginx 编译 gcc 环境

yum -y install gcc gcc-c++

安装prce

yum -y install pcre*

安装zlib， nginx 使用zlib对 http 包内容进项 gzip 压缩

yum -y install zlib zlib-devel

安装openssl ，用于通讯加密

yum -y install openssl openssl-devel

mkdir nginx
cd nginx

下载nginx 压缩包

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

解压nginx

tar -zxvf  nginx-1.11.5.tar.gz
cd  nginx-1.11.5

8.编译和安装nginx

make
make install

查看 nginx

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

10 制作软链接

cd /usr/bin

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

11.进入nginx 的默认配置文件中

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

在最底部增加

include /nginx/*.conf;

创建自己的nginx文件

touch /nginx/nginx.conf

vim /nginx/nginx.conf

14.写入配置

# my dist

server {
  listen: 80;
  server_name localhost;
  root /nginx/dist;
  autoindex on;
  add_header Cache-Contro; "no-cache, must-revalidate";
  location / {
     add_header Access-Control-Allow-Origin *;
     try_files $uri $uri/ /index.html;
  }
  
}

在nginx 中创建nginx/dist

mkdir /nginx/dist

16 上传自己的本地文件,进入本地的dist 文件夹，

scp -r  ./*  root@xxx.xx.xx.xxx:/nginx/dist/

17 重启nginx

nginx -s reload

18 打开浏览器测试，如果打开失败，检查服务器是否打开了对应的端口

19 查看nginx 启用了哪些端口

ps aux | grep nginx

netstat -anp | grep pid

nginx 部署前端项目

项目构建

nginx 环境处理