这篇博文我们来学习下如何在Centos7 上编译安装Nginx并打包部署一个Vue项目。


1. Centos7 上安装Nginx

如果我们想在Centos7 上安装Nginx 一共有两种方式可供选择。

  • 一种是编译安装
  • 另外一种是yum 包管理器方式安装

我这里详细讲述下编译安装Nginx的方法。

如果你更想使用另外一种方式,可以参考付江前辈的博文 CentOS7 安装Nginx的两种方式

1.1 Centos7 上编译安装Nginx

1.1 安装编译安装所需要的依赖

Centos7 上编译安装一般需要安装gcc 编译器以及其他一些相关的依赖。

最为方便的一种方式是使用组合Linux命令,同时安装多个依赖。

yum install -y gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-devel

在这里由衷感谢付江前辈的博文提供的方法。

1.2 下载安装包

接下来我们需要打开Nginx 官网 http://nginx.org/
在这里插入图片描述
然后找到上面图中所示的Download 超链接

如果没有什么意外,我们点击后将看到如下的界面。
在这里插入图片描述
接下来我们选择上图中所示的稳定版本进行下载。

1.3 XFtp 上传到/opt/app/nginx 文件夹下

下载完成后我们需要通过FTP 工具传到我们的服务器上。

这里我使用的是Xftp, 上传成功后如下图所示:
在这里插入图片描述

1.4 执行解压命令

接下来我们需要将压缩包进行解压,为了解压我们需要输入如下命令:

tar -zxvf nginx-1.16.1.tar.gz

解压成功后如果是xftp 观察,我们会看到这样的界面。
在这里插入图片描述

1.5 进入解压文件夹

接下来我们需要进入解压成的文件夹,输入如下命令:

cd /opt/app/nginx/nginx-1.16.1

打开xftp ,我们观察可以看到如下所示的内容:
在这里插入图片描述

1.6 执行编译前的配置

输入如下命令以便于执行一些编译前的配置检查。

./configure 

1.7 编译并安装

开始编译和安装到默认位置:

make && make install

安装完成后会生成二进制文件到某个路径下,这个路径待会我们详细说。

或者 编译并安装到指定位置:

./configure --prefix=/usr/local/nginx/nginx-1.20.1/ --with-http_ssl_module && make install

–with-http_ssl_module 支持https
如果报错安装:yum -y install pcre-devel

1.8 查找Nginx 安装路径

编译安装完成后,我们想要查找Nginx 编译后的安装路径,

我们需要输入如下命令:

whereis nginx

命令执行成功后如图所示:
在这里插入图片描述

  • 值得注意的是,今后我们只需要关注这个文件夹就行了
    在这里插入图片描述

  • /opt/app/nginx/nginx-1.16.1/ 文件夹编译安装完成后就没用了,可以删掉了。

  • /usr/local/nginx 就是Nginx 编译后的Nginx 程序主文件夹,包括二进制命令和依赖。

  • 之前在/opt/app/nginx/nginx-1.16.1/conf文件夹下的修改配置文件,修改了几次发现都没有生效,就是这个原因导致的。

1.9 进入nginx 编译后的文件夹

进入编译后的Nginx 主程序文件夹如下所示

cd /usr/local/nginx

进入成功后我们可以看到如下的目录
在这里插入图片描述
接下来我们进入sbin 二进制文件夹,因为待会要执行一些命令工具:

cd sbin

进入成功后我们就来到了这个文件夹:
在这里插入图片描述

1.10 启动Nginx

nginx 是一个Linux上的可执行文件,启动它我们需要输入如下命令:

./nginx
  • 启动nginx:./nginx
  • 快速停止nginx:nginx -s stop
  • 修改配置后重新加载生效:nginx -s reload
    • 如果执行报如下错误,
 nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" failed(2: No such file or directory)

那么需要执行配置关联命令如下:
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

1.11 验证安装

安装完成后,我们可以输入如下URL地址,检查是否安装成功。

http://IP:80
  • 比如:http://192.168.159.11
  • 这里的IP 替换成你的服务器IP,如果端口没有开放的话,需要在阿里云上开启端口策略。

如果可以看到这样的界面,说明安装成功了。
在这里插入图片描述

2. Vue 项目打包

接下来我们讲解下Vue 项目的打包。

2.1 Vue 项目的目录结构

这里提供一个示例目录如下所示
在这里插入图片描述
正如我们看到的,这里有很多配置文件,针对开发,测试,线上环境的。

如果我们打开一个生产的配置文件可能会看到如下的内容:
在这里插入图片描述

2.2 Vue 项目如何动态指定使用哪个配置文件的?

我其实刚开始是有些疑惑的
在这里插入图片描述
Vue项目是如何动态指定项目激活使用哪一个配置文件的呢?

2.3 package.json

在咨询了我的一个很nice的前端朋友DIN 后,终于找到了答案。

他告诉我说在package.json 文件中,于是乎我怀着激动的心情打开了这个文件。

{
    "name": "exam-admin",
    "version": "2.0.1",
    "author": "***",
    "description": "***",
    "license": "MIT",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve --mode dev",
        "build": "vue-cli-service build --mode prod",
        "build:dev": "vue-cli-service build --mode dev",
        "build:test": "vue-cli-service build --mode test",
        "build:pre": "vue-cli-service build --mode pre",
        "build:prod": "vue-cli-service build --mode prod",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "axios": "^0.19.0",
        "core-js": "^2.6.9",
        "element-ui": "^2.10.1",
        "vue": "2.6.10",
        "vue-router": "^3.0.3",
        "vuex": "3.1.0",
        "normalize.css": "8.0.1",
        "js-cookie": "2.2.0",
        "nprogress": "0.2.0",
        "vue-count-to": "^1.0.13"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^3.9.0",
        "@vue/cli-plugin-eslint": "^3.9.0",
        "@vue/cli-service": "^3.9.0",
        "@vue/eslint-config-standard": "^4.0.0",
        "babel-eslint": "^10.0.1",
        "eslint": "^5.16.0",
        "eslint-plugin-vue": "5.2.2",
        "node-sass": "^4.12.0",
        "sass-loader": "^7.1.0",
        "vue-template-compiler": "^2.6.10",
        "svg-sprite-loader": "4.1.6"
    }
}

看看到这里,我终于明白了Vue 项目是如何打包时指定到底激活哪个配置文件的。

2.4 Vue 项目动态指定配置文件的秘密

刚才的文件如果我们仔细注意就可以看到如下内容:

    "scripts": {
        "serve": "vue-cli-service serve --mode dev",
        "build": "vue-cli-service build --mode prod",
        "build:dev": "vue-cli-service build --mode dev",
        "build:test": "vue-cli-service build --mode test",
        "build:pre": "vue-cli-service build --mode pre",
        "build:prod": "vue-cli-service build --mode prod",
        "lint": "vue-cli-service lint"
    },

在这里做了一个映射。

如果我们在项目的根路径下输入如下命令

npm run server

那么其实执行的命令是

vue-cli-service serve --mode dev

如果我们想指定使用生成的配置文件,那么输入如下命令即可

npm run build

npm run build:prod

2.5 将dist 文件夹内容上传到服务器上

上面的命令执行完成后,将会在项目根路径下生成一个叫做dist 的文件夹。

我们需要把这个文件夹通过ftp 软件放到服务器上

我这里部署了两个项目
在这里插入图片描述

3. 修改Nginx 配置文件

值得注意的是,我们需要修改的是/usr/local/nginx/conf 路径下的配置文件,而不是/opt/app/nginx/nginx-1.16.1/conf 路径下的。

如图所示:
在这里插入图片描述
修改内容主要如下:

server {
        listen       81;
        server_name  admin;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /opt/app/exam/exam-admin;
            index  index.html index.htm;
        }

        #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;
        }

        # proxy restful api
        location /api/ {
          proxy_pass  http://0.0.0.0:8001;
        }
    }

server_name 唯一即可

        location / {
            root   /opt/app/exam/exam-admin;
            index  index.html index.htm;
        }

location/root 必须是静态资源文件的绝对路径,
在这里插入图片描述
接下来这一部分是后台提供的restful API 接口

   location /api/ {
          proxy_pass  http://0.0.0.0:8001;
   }

如果配置多个静态资源,我们可以尝试监听不同的端口即可。

 listen       81;

修改后完整的nginx.conf 内容如下


worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       81;
        server_name  admin;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /opt/app/exam/exam-admin;
            index  index.html index.htm;
        }

        #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;
        }

        # proxy exam api
        location /api/ {
          proxy_pass  http://0.0.0.0:8001;
        }
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

    server {
        listen       82;
        server_name  student;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /opt/app/exam/exam-student;
            index  index.html index.htm;
        }

        #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;
        }

        # proxy exam api
        location /api/ {
          proxy_pass  http://0.0.0.0:8001;
        }
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
}

3.1 重新加载配置文件

编译方式安装的Nginx ,一旦配置文件修改了,如果当前Nginx 正在运行,那么我们需要将配置文件重新加载下,Nginx 重新加载命令如下所示:

./nginx -s reload

3.2 访问项目说明

然后我们访问

  • http://ip:81 端口就会访问exam-admin项目
  • http://ip:82 端口就会访问exam-student项目

他们使用的后台接口都是类似

  • http://IP:8001/api/admin/test.do

参考资料


本篇完~

Logo

前往低代码交流专区

更多推荐