nginx安装和Vue部署nginx中

###一、nginx的安装
安装步骤
安装前环境准备
1：下载nginx安装包nginx-1.17.5（当前最新），并上传到服务器上
这样上传到/root/

2：因为Nginx以来与gcc的编译环境，所以，在mini centos中需要安装编译环境来使Nginx能够编译起来

yum install gcc-c++

3：Nginx的http模块需要使用pcre来解析正则表达式

yum -y install pcre pcre-devel

4：依赖的解压包

yum -y install zlib zlib-devel

5：openssl安装

yum install -y openssl openssl-devel

6：建立要安装的目录

切换到/usr/local目录下，新建文件夹nginx-1.17.5

安装nginx
1：，进入上传位置，解压nginx文件
cd /root/
tar -xvf nginx-1.17.5.tar.gz

2：编译，安装

cd /root/nginx-1.17.5
./configure --prefix=/usr/local/nginx-1.17.5 #指定安装目录

3：在/root/nginx-1.17.5目录下执行编译命令

make

4:执行安装命令

make install

5:切换到安装目录

cd /usr/local/nginx-1.17.5

6:启动
cd /usr/local/nginx-1.17.5/sbin/

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

7：开放nginx默认端口号80

/sbin/iptables -I INPUT -p tcp --dport 80 -j ACCEPT

8：远程访问测试

9:这里我的80端口已经被占用了，所以修改端口号
vim conf/nginx.conf

 server {
        listen       8089;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rSf0Q7Op-1573465251572)(/upload/微信图片_20191105115401.png)]

###二、vue部署
当我们使用vue来编写一个前端页面，就意味着我们要做成了前后端分离了，然而在前后端分离的场景下，不可避免的我们就会遇到了跨域问题。

比如：我们将前端项目部署在192.168.1.1:8080下 后端项目部署在192.168.1.1:8081下，根据同源策略只要协议，ip，或端口只要有一个不一样就意味着跨域。

跨域是指浏览器禁止跨域请求，而不是这个语言如js不允许。

我们这里将跨域请求分为开发环境下的跨域和生产环境中的跨域。

####跨域-开发环境
一般来说，我们开发环境使用使用代理

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {

      '/api/**': {
        target: 'http://localhost:10088', // 你接口的域名
        secure: false,
        changeOrigin: false,
      }


    },
省略其他...

使用npm run dev 启动项目，发现可以访问后端，完美

####跨域-生产环境
生产环境我们可以使用nginx做成反向代理，步骤如下
1.首先我们将项目打包使用 npm run build
发现项目多了一个dist文件夹，这就是打包后的文件夹，里面有index.html和static文件夹

2.我们在服务器建立一个目录，这里/usr/local/nginx-1.17.5/vue-demo,然后将上一步打包后index.html和static上传到这个目录下

3.配置nginx.conf

 server {
        listen       8089;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /usr/local/nginx-1.17.5/vue-demo;  #前端项目的位置
            index  index.html index.htm;
        }

        location /api {    #接口api的去访问后端接口
            proxy_pass http://54288.top; #后端项目
        }
 
        省略其他....
}

如上面代码我将前端项目vue-demo

4.启动nginx ，访问，54288.top:8089 完美，部署完成跨域也完成

5.刷新404的话

location / {
	root   /usr/local/nginx-1.17.5/vue-demo;  #前端项目的位置
	index  index.html index.htm;
	try_files $uri $uri/ /index.html
}

前端项目也可以部署到其他的服务器上，不一定要nginx，可以是tomcat。将打包后的文件放在tomcat的webapp目录下，即可