在服务器中非root用户部署vue(nginx)

首先下载nginx-1.8.1版本(https://mirrors.huaweicloud.com/nginx/nginx-1.8.1.tar.gz)

然后解压:tar -zxvf nginx-1.8.1.tar.gz

选择目录: cd nginx-1.8.1

安装编译工具及库文件:

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

./configure --prefix=/自己想存放的文件夹/nginx

make && make install

如果权限不足
chown nginx:nginx -R /自己存放的文件夹/nginx

chown nginx:nginx -R /减压文件夹/nginx-1.8.1

在自己存放的文件夹中进入sbin

./nginx 启动
./ngxin -s stop 停止
./ngxin -s reopen 重启
./nginx -s reload 刷新配置

启动时会出现错误
原因:Linux只有root用户可以使用1024以下的端口

修改nginx.conf端口号

例如我的端口号为(9090)

开发端口号
sudo firewall-cmd --permanent --add-port=9090/tcp

刷新端口号
sudo firewall-cmd --reload

访问
在服务器中非root用户部署vue(nginx)_第1张图片
nginx已经配置完

选择vue项目 npm run build:prod 或 (npm run build)

然后把dist上传到nginx中的html中
在服务器中非root用户部署vue(nginx)_第2张图片
修改nginx.config
添加一个server

 server {
		listen       9099;
		server_name  localhost;
		charset utf-8;
        # 发布包的目录
		root   html/dist;
		index  index.html;
		proxy_set_header	Host			$http_host;
		proxy_set_header	X-Real-IP		$remote_addr;
		proxy_set_header	X-Forwarded-For	$proxy_add_x_forwarded_for;
		location ^~ /Z3_server/ {
				# 请求后端接口地址
				proxy_pass   http://ip:8081/xxx;
		}
		location ^~ / {
                # 防止问题文件/CSS路径跨域
				add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
				add_header 'Access-Control-Allow-Credentials' 'true';
				add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
				add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
				try_files $uri $uri/ @router;
				index index.html;
				error_page 405 =200  $request_uri;
		}
		
		location @router {
			   rewrite ^.*$ /index.html last;
		}
	}

重启nginx查看效果

在这里插入图片描述

你可能感兴趣的:(在服务器中非root用户部署vue(nginx))