《Nginx怎么部署vue项目》

news2024/12/25 22:38:49

推荐学习文档
- nginx https配置ssl证书实现访问https服务
- Nginx实现404页面的配置方法

在开始部署之前，我们先要准备好以下工作：

一个能跑通的Vue项目
一个正常的、安装了nginx的服务器（可以是本地电脑）
服务器上安装了Node.js（nodejs官网：https://nodejs.org/en/ 可下载最新LTS版本并安装）
如果说服务器有了，nginx没安装？
那没关系，安装起来很简单，可以参考以下步骤：

安装nginx

官网下载安装包。官网：http://nginx.org/
找到下载的安装包，解压缩。（nginx不需要运行安装，此时解压的位置就算是nginx安装的位置）

包解压后会得到如下目录。里面比较重要文件夹有：

conf：里面有配置文件nginx.conf
html：放打包好的vue项目
nginx.exe：nginx启动项

在这里插入图片描述

另外，多版本的nginx可以共存，只要设置web端口不一样就可以同时使用。

nginx参数配置理解

nginx常用基本命令

启动nginx：systemctl start nginx
停止nginx：systemctl stop nginx
快速停止nginx：nginx -s stop
quit是完整有序的停止：nginx -s quit
热加载配置：nginx -s reload

默认配置

conf目录下有默认配置文件nginx.conf

# 工作进程的数量
worker_processes  1; # 与worker_connections乘积表示实际处理事件的总数
events {
	worker_connections  1024; # 每个工作进程连接数
}

http {
	include       mime.types;  # 文件扩展名与文件类型映射表
	include       self/ *.conf; # 独立出不同网站不同配置文件,引入其他的配置文件
	default_type  application/octet-stream; # 默认文件类型

	# 日志格式
	log_format  access  '$remote_addr - $remote_user [$time_local] $host "$request" '
		'$status $body_bytes_sent "$http_referer" '
		'"$http_user_agent" "$http_x_forwarded_for" "$clientip"';
	access_log  /srv/log/nginx/access.log  access; # 日志输出目录
	gzip  on; # gzip模块设置，设置是否开启gzip压缩输出
	sendfile  on; # 开启文件传输模式
	#tcp_nopush  on; # 减少网络报文数量
	
	#keepalive_timeout  0; # 连接不超时，单位 s
	# 链接超时时间，自动断开
	keepalive_timeout  60;

	# 虚拟主机
	server {
		listen       80; # 监听地址以及端口
		server_name  localhost; # 浏览器访问域名

		charset utf-8; # 默认字符集
		access_log  logs/localhost.access.log  access;
	
		# 路由
		location / {
			root   html; # 访问根目录
			index  index.html index.htm; # 入口文件,可以接收index、index.html、index.htm文件
		}
	}
}