使用nginx部署静态前端项目到服务器

安装nginx

1.安装编译工具及库文件

yum -y install make zlib zlib-devel gcc-c++ libtool  openssl openssl-devel pcre-devel

gcc、gcc-c++ # 主要用来进行编译相关使用

openssl、openssl-devel # 一般当配置https服务的时候就需要这个了

zlib、zlib-devel # 主要用于文件的解压缩

pcre、pcre-devel # Nginx的rewrite模块和HTTP核心模块会用到PCRE正则表达式语法

make # 遍历

make install # 安装

2.创建nginx目录

1）进入/usr/local目录下

cd /usr/local

2）创建nginx文件

mkdir nginx

3.下载并解压nginx

1）进入nginx文件下

cd /usr/local/nginx

2）下载nginx安装包

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

3）解压

tar -zxvf nginx-1.18.0.tar.gz

4.进入安装包目录

cd  /usr/local/nginx/nginx-1.18.0

5.编译安装nginx，默认安装到 /usr/local/nginx中

./configure
make && make install

6.进入到/usr/local/nginx/sbin目录，启动nginx

./nginx

7.查看启动的 nginx 进程

ps -ef|grep nginx

8、查看是否可以访问

curl localhost:80

出现html脚本代表可以访问

此时如果已经设置好安全组过滤80端口并关闭防火墙，可以在任意机器上使用服务器ip访问nginx初始页面：

观察可以发现nginx文件夹里有一个html文件夹，里面存放了nginx初始页面index.html，所以现在可以推测出使用nginx部署前端项目的方法；

至此，nginx安装完成

搭建前端项目

如果是使用了npm的项目，比如vue-cli，就可以直接使用打包命令打包项目；

npm install
npm run build

打包完成后，会在项目路径生产一个dist的文件，文件上传到服务器的/usr/local/nginx/html路径下；

当然如果和我一样是html项目，就直接把所有项目文件拖到html下；

编辑nginx配置文件

首先我们需要用到两个文件；

1. nginx/conf下的nginx.conf，用来配置文件
2. nginx/sbin下的nginx，启动器，修改配置文件后重启nginx

先进入conf修改nginx.conf

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

#启动的进程数量
worker_processes  1;
events {
#单个进程并发量
    worker_connections  1024;#总并发量=单个进程并发量*启动的进程数量
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;#连接服务器超时时长65s

	#####
	# 我们暂时只需要用到server底下的几个参数
	#####
    server {
        listen       8888;#服务的端口
        server_name  123.57.1.35; #直接写localhost也行
        location / {#配置默认访问页
            root   /usr/local/nginx/html/dist-atp;#或者html/demo反正指向你存放index.html的地方
            index  index.html index.htm;#访问的首页
            try_files $uri $uri/ @router;
        }
    location @router{
    #rewrite ^.*/index.html last;
    rewrite ^(.+)$ /index.html last;
    }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

按Esc然后输入 :wq 回车

nginx重启

重启之前可以检查自己的配置文件有没有错误

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

然后进入sbin重启

./nginx -s reload 

其中：

启动，重启，停止nginx

cd /usr/local/nginx/sbin/

./nginx #启动
./nginx -s stop #停止
./nginx -s quit #退出
./nginx -s reload #重启 修改配置后重新加载生效<br><br>./nginx -s reopen ：重新打开日志文件<br>

./nginx -s quit:此方式停止步骤是待nginx进程处理任务完毕进行停止。
./nginx -s stop:此方式相当于先查出nginx进程id再使用kill命令强制杀掉进程。

现在就可以在任意机器使用ip加端口看到我们的页面了；

页面不加载js、css、图片

当然如果和我一样使用的是html项目直接拉取而没有打包，就需要继续找错误了，因为我们的页面会变成这样：

加载js、css

在nginx配置文件中加上

location ~ \.css {
       add_header  Content-Type    text/css;
}
location ~ \.js {
       add_header  Content-Type    application/x-javascript;
}

保存之后别忘了重启nginx

加载图片

解决一部分，因为我的项目分为两个文件夹，一个文件夹放所有页面和一开始的静态文件，另一个文件夹放扩展之后新加的内容；
我发现另一个文件夹的图片全都加载不进来，而主文件夹的文件可以正常加入，所以怀疑是文件夹的原因，当我把图片放到主文件夹里后，一切正常；

算是解决了；

只要文件在index.html的那个主文件夹中就一切正常；

就是nginx只允许主文件夹内访问，分成两个文件夹会有跨域问题