Step1：服务器上安装 Nginx

1、安装nginx

1
2
3
4
# Ubuntu
apt-get install nginx
# centOS
yum install nginx

2、检查nginx是否安装，输入如下命令后若出现版本号则安装成功

1
nginx -v

3、启动nginx

1
2
3
4
systemctl start nginx

# 设置nginx在系统启动时自动启动
systemctl enable nginx
  • 注：这里如果出现报错，说明缺少nginx启动相关的依赖，根据报错提示，复制报错提示解决方案的命令，安装相关依赖重新执行上述启动命令即可！

4、在浏览器输入ip地址，若出现如下页面则启动成功

Step2：打包上传Vue项目到服务器

配置

1-1、Vue2项目配置跨域

在 vue.config.js 中进行如下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    /* 上线用（配置跨域） */
    proxy: {
      '/api': {
        target: '接口地址url',
        // 允许跨域
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }

1-2 Vue3+Vite项目配置跨域

在 vite.config.js 中进行如下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
server: {
            port: 3005, // 项目端口
            host: "localhost",
            proxy: {
                "/smartReport": { // 接口前缀
                    target: "接口服务器地址：ip+端口",
                    // 允许跨域
                    changeOrigin: true
                    // 路径重写：在发出请求后将 接口前缀 替换为''空值，这样不影响接口请求
                    // pathRewrite: { 
                    //   '^/smartReport': ''
                    // }
                }
            }
        }

2、Vue项目打包：

1
npm run build

打包完成后，会在项目根目录下自动生成一个默认dist文件夹

3、上传至服务器指定文件夹下

这里我放在服务器的 /root/front_end 文件夹下
上传命令：

1
scp -r [dist文件夹所在的绝对路径] [服务器用户名]@[服务器IP地址]:[目标服务器文件夹绝对路径]

以我的举例：

也可以使用 Xftp 向服务器传输文件，Mac用户推荐Termius

Step3：配置 Nginx

  1. 在服务器上找到Nginx安装位置
    默认在/etc/nginx

  2. 打开 /etc/nginx

    1
    cd /etc/nginx

  3. 修改nginx.conf

我使用的Vs Code进行文件创建并写入

方法：在Vs Code中安装以下插件，连接至服务器后，打开/etc/nginx

在 nginx.conf 中添加server，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
server {
        listen       3000;#自己设置端口号
        server_name  njupt_patent  ;#自己设置项目名称

        location / {
            root   /root/front_end/dist;#这里写vue项目的所在地址
            index  index.html;#这里是vue项目的首页，需要保证dist中有index.html文件
        }
        location /api/ {    # 会将接口地址/api开头的全部替换文下边配置的地址
            proxy_pass http://[服务器ip地址]:[端口号];            #接口服务地址
        }
        error_page   500 502 503 504  /50x.html;#错误页面
	}

配置完 nginx.conf 后保存，执行

1
2
# 测试 Nginx 配置以确保没有语法错误
nginx -t

如果没有错误，重新加载Nginx以使更改生效

1
systemctl reload nginx
  1. 也可以直接重启nginx
    1
    systemctl restart nginx

Step4：授权访问服务器中的文件夹

在服务器中打开 dist 所在的文件夹的最上级文件夹（一般是根目录），如：我的 dist 文件夹的绝对路径为 /root/front_end/dist ，那么就打开：

1
cd /

输入如下命令授权访问 dist 文件夹：

1
chmod -R 777 /root/

Step5：访问已经部署好的Vue项目

在浏览器输入：
服务器IP地址:自己设置端口号/index.html
即可进行访问

Step6：域名配置

在上述 nginx.conf 中添加如下配置：

1
2
3
4
5
6
7
server{
		listen 80; #监听端口，http服务默认监听80端口
		server_name example.com; #域名，最好需要注册的域名，而且还要解析域名
		location / {
			proxy_pass http://example.com:[端口号];#代理转发地址
		}
	}

配置本地地址映射域名以及域名转发指定ip

首先安装nginx,参加博客：https://www.cnblogs.com/qfb620/p/5508468.html

按照博客写的访问127.0.0.1查看是否访问成功，成功即安装成功。

下一步就是配置127.0.0.1与域名scc.company.com的映射（也就是访问scc.company.com可以请求到本地指定端口的地址。我的项目在本地的8083端口，配置正确，就能访问到我的项目）

首先,通过switch hosts来添加本地对应域名的映射 127.0.0.1 sct.company.com

下一步，打开nginx.conf

找到server,配置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
server {
      listen       80;
      server_name  sct.company.com;
 
      #charset koi8-r;
 
      #access_log  logs/host.access.log  main;
 
      location / {
          root   html;
         index  index.html index.htm;
      }
  
      location /custom-web/ {
      proxy_pass   http://127.0.0.1:8083;
      }

主要改了下面两个地方

   server_name  sct.company.com;
    location /custom-web/ {
    proxy_pass   http://127.0.0.1:8083;
    }

好了，127.0.0.1对应域名sct.company.com配好了

记得重启nginx,进入到nginx的目录，

输入

1
nginx -s reload

进行重启。

没有报错就是重启成功

然后清空浏览器缓存，我是清空了好几次，

又ping了一下sct.company.com，看请求的是不是本地，

可以看到请求的是本地

这个时候，浏览器输入sct.company.com/custom-web/…访问一下项目地址 ,可以看到可以请求到tomcat上面的项目了

=================================分割线=========================================
下面看下重定向，配置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
server {
      listen       80;
      server_name  sct.lvmama.com;
 
      #charset koi8-r;
 
      #access_log  logs/host.access.log  main;
 
      #location / {
         # root   html;
         # index  index.html index.htm;
     # }
  
  location / {
   rewrite ^/(.*)$ http://www.baidu.com/; 
   proxy_pass   http://10.200.4.120:80;
  }
  
      location /customization-back-web/ {
      proxy_pass   http://127.0.0.1:8083;
      }

主要是这个代码：

location / {
rewrite ^/(.*)$ http://www.baidu.com/;
proxy_pass http://10.200.4.120:80;
}

nginx -s reload重启nginx

你输入sct.company.com就会跳转到百度

nginx配置文件 通过域名访问

解读Nginx配置文件，通过域名访问tomcat
第一次在linux 服务器上使用nginx 并指向tomcat 目录 通过域名 访问项目。遇到了很多坑，为了让自己更好的学习并吸收知识，特意总结了一下这次的经验。
首先我们需要了解一下nginx的组成部分，想必大家都是对他有所了解。
文件所在的路径是 /usr/local/nginx/conf 文件夹下的nginx.conf。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
第一个原本的配置文件上是注释的，这里指的是nginx的用户权限，
user nobody;

设置最大的工作衍生进程数 这里默认是1
worker_processes 1

最大的连接数 设置最大的连接数默认为1024个连接数 
events {
    worker_connections  1024;
}

Http 的主要设置，这里可以添加多个server

http {
每一个Server都是一个服务
server{
	#这里是过滤请求，/是所有请求都可以
	location /{
		
	}
}

下面部署nginx 并使其转发到tomcat下的重点在于server这个块。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
server {
      listen       80; #首先是nginx的监听端口默认为80
      server_name  www.xxxx.com; #这里是你需要访问的域名地址
#add_header 'Access-Control-Allow-Origin' '*';#这里是http 域名跨域，报错时候添加的请求头，这样写所有请求都会进来，会很不安全。
      #charset koi8-r;
      #access_log  logs/host.access.log  main;#这里是 日志文件的生成路径
      
#详细介绍location
      location / {
      	#是监听的端口默认访问的地址，这里如果没有做tomcat的转发则会进入nginx的html目录下的index.html
          root   html;
          
          #这里是编写监听到的请求所转发的端口号，即tomcat端口
	proxy_pass http://localhost:8081;
          #Proxy Settings;
          #proxy_redirect off;
          #proxy_set_header Host $host;
          #proxy_set_header X-Real-IP $remote_addr;
          #proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	
	#设置nginx 的默认显示页
          index  index.html index.htm;

	#设置http请求的请求头，使其在跨域访问上不会被浏览器阻止。ps:这里设置我发现没有用，后来还是在ajax过滤器中添加的 请求头，如果大家有知道这里怎么修改的，请留言大家一起学习。
	add_header 'Access-Control-Allow-Origin' '*';
	add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
	add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
      }

      #error_page  404              /404.html;

      # redirect server error pages to the static page /50x.html
      #
      error_page   500 502 503 504  /50x.html;
      location = /50x.html {
          root   html;
      }
  }

下面是location的设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14

	设置服务器缓存
1.	添加一个location  ~.*\.(意思是所有.jpg后缀的文件)
location  ~.*\.(jpg|png|gif)${

2.设置该文件类型文件缓存的清除周期为30天
	expires  30d;
}
location  ~.*\.(css|js)?${

3.设置该文件类型文件缓存的清除周期为1小说
	expires  1h;
}
这里注意 全部请求是/  而过滤的请求是\

顺带提一下负载均衡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Nginx 均衡负载的实现 简单提一下 均衡策略
在http 里添加一个upstream 在这个里面依次填写 不同的ip以及端口 nginx 
upstream name{
	server ip:端口号;
	server ip:端口号;
	server ip:端口号;
	server ip:端口号;
}
nginx 的默认均衡策略是加权轮询 
1.加权轮询策略
nginx计算每个后端服务器的权重，然后自动分配权重最高的后端服务器来处理请求。
加权轮询策略 使用 weight=1来给地址添加权重，权重越高，nginx会优先分配

2.ip_hash策略
nginx会记录这个访问的ip地址并且在一段时间中 分配给这个ip一个server。
ip_hash 在upstream 的结尾加上  ip_hash; nginx 自动使用ip_hash

3.url_hash 等.. 插件形式的均衡策略这里就不提了

设置完配置文件下面就是运行测试了。

  1. 进入nginx 启动文件的目录 /usr/local/nginx/sbin
  2. 启动服务 ./nginx （这是在第一次启动时使用，或者进程被杀死时启动。）
  3. 重启服务 ./nginx -s reload (这是在修改了配置文件的情况下，不需要杀死进程)
  4. 如果在使用 ./nginx 命令时 linux 报错nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)证明这个80端口被nginx占用了，这个时候需要杀死进程 使用killall -9 nginx 或者使用 netstat -apn | grep 80 查询当前80端口 tcp 0 0 0.0.0.0:80 0.0.0.0:* LISTEN 13741/nginx: master 然后使用kill -9 13741命令杀死进程.
  5. 启动nginx服务器就不会报错，如果配置文件出现错误，下面会显示错误的行号

在浏览器上输入域名，nginx自动在nginx.conf中查找 server_name 对应的域名 的server 下的location跳转到proxy_pass 这里指的的 IP和端口。我这里设置的是8081端口。

注意如果proxy_pass 配置的IP地址和域名解析的IP地址不同会出现

这个问题我是在java代码中使用ajax拦截请求后加入到请求头中解决的。

在nginx上添加下面这几段并没有实际效果。
add_header ‘Access-Control-Allow-Origin’ ‘*’;
add_header ‘Access-Control-Allow-Methods’ ‘GET, POST, OPTIONS’;
add_header ‘Access-Control-Allow-Headers’ ‘DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type’;

LINUX安装nginx并绑定域名详细教程

  1. 安装依赖包

    1
    2
    //一键安装上面四个依赖
    yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

  2. 下载并解压安装包

    1
    2
    3
    4
    5
    6
    7
    //创建一个文件夹
    cd /usr/local
    mkdir nginx
    cd nginx
    //下载tar包
    wget http://nginx.org/download/nginx-1.13.7.tar.gz
    tar -xvf nginx-1.13.7.tar.gz

  3. 安装nginx

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //进入nginx目录
    cd /usr/local/nginx
    //进入目录
    cd nginx-1.13.7
    //执行命令
    ./configure
    //执行make命令
    make
    //执行make install命令
    make install

  4. 配置nginx.conf

    1
    2
    打开配置文件
    vi /usr/local/nginx/conf/nginx.conf

    将端口号改成没有被占用的端口（我这里用的是8066），因为可能apeache占用80端口，apeache端口尽量不要修改，我们选择修改nginx端口。

localhost修改为你服务器ip地址。

  1. 启动nginx

    1
    2
    3
    4
    /usr/local/nginx/sbin/nginx -s reload
    //如果出现报错：nginx: [error] open() ＂/usr/local/nginx/logs/nginx.pid＂ failed

    则运行： /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

    再次启动即可！
    查看nginx进程是否启动：

    1
    ps -ef | grep nginx

  2. 若想使用外部主机连接上虚拟机访问端口(你的服务器ip地址)，需要关闭虚拟机的防火墙：

    1
    2
    3
    centOS6及以前版本使用命令： systemctl stop iptables.service

    centOS7关闭防火墙命令： systemctl stop firewalld.service

随后访问该ip即可看到nginx界面。

  1. nginx安装完成后，我们来绑定域名
    1
    2
    打开配置文件
    vi /usr/local/nginx/conf/nginx.conf

修改监听端口listen为: 80;
修改server_name为 www.xxxx.com（这里是你的域名）;
在下面server标签里添加

1
2
3
4
5
6
location / {
           #转发地址
           proxy_pass http://localhost:8066;
           root   html;
           index  index.html index.htm;
        }
  1. 然后保存文件，重启nginx，重新访问服务器IP地址，你会发现，你的域名也可以直接跳到你项目的页面

相关链接

  1. Linux服务器使用Nginx部署前端项目+ 域名配置
  2. nginx配置本地地址映射域名以及域名转发指定ip
  3. nginx配置文件 通过域名访问
  4. LINUX安装nginx并绑定域名详细教程
=================我是分割线=================

欢迎到公众号来唠嗑: