Nginx部署前端项目到服务器

环境准备

1、一台虚拟机或者服务器
2、Xshell 和 Xftp
3、本地Windows10系统

安装Nginx

使用Xshell连接服务器，既然想要在服务器上面放静态资源，像HTML，js等，就需要安装静态资源服务器。静态资源服务器有Apache和Nginx，这里我们选用nginx。
Apache和Nginx的区别

1、安装依赖库
在安装Nginx之前，需要安装一些依赖的库

yum install -y pcre pcre-devel

yum install -y zlib zlib-devel

yum install gcc-c++

yum install -y openssl openssl-devel

2、安装好之后，可以安装Nginx了

wget -c https://nginx.org/download/nginx-1.14.0.tar.gz

3、解压并进入Nginx目录

tar -zxvf nginx-1.14.0.tar.gz
cd nginx-1.14.0

4、使用Nginx默认配置

./configure

5、编译安装

make
make install

6、Nginx启动
首先查找安装路径：

whereis nginx

执行启动命令：

/usr/local/nginx/sbin/nginx

执行完没有报错说明服务器成功开启，将服务器ip地址在浏览器直接输入，会显示nginx启动成功的界面，如下：

7、查看服务运行状态

ps -ef | grep nginx

停止服务：

kill 进程号

重新启动服务：

/usr/local/nginx/sbin/nginx -s reopen

上传静态资源文件

1、打开Xftp，进行文件传输。
服务器的根目录是 /root ，我新建了一个目录用来放自己的项目，这里我建了一个 /app 目录。需要放什么文件，直接复制粘贴过来就可以。
前端项目默认有一个index.html页面，作为项目打开的默认页面。
2、配置Nginx
修改Nginx的配置文件：

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

（1）按insert键进入编辑模式，将用户改为当前用户root

（2）

• 将server下的location的root属性改为自己新建的用来存放项目的目录。我的目录是 /root/app。
• 添加autoindex on，即nginx打开目录浏览功能。
• 修改默认的端口号，防止默认的80端口号被占用。这里我修改端口号为82。
• 关闭防火墙

（3）修改完成后，：wq 保存退出。
在浏览器地址栏输入自己的服务器ip地址和端口号加项目默认页面 index.html测试是否部署成功。
如：http://192.168.18.132:82/index.html

小结

作为程序媛就要来点不一样的礼物，明天就是520了，搭建一个表白网站送给心爱的她（他）一个惊喜吧✨有想要表白网站项目的源码私信我哦