阿里云Centos7编译安装Nginx并打包部署Vue 项目
- 1. Centos7 上安装Nginx
- 1.1 Centos7 上编译安装Nginx
- 1.1 安装编译安装所需要的依赖
- 1.2 下载安装包
- 1.3 XFtp 上传到/opt/app/nginx 文件夹下
- 1.4 执行解压命令
- 1.5 进入解压文件夹
- 1.6 执行编译前的配置
- 1.7 编译并安装
- 1.8 查找Nginx 安装路径
- 1.9 进入nginx 编译后的文件夹
- 1.10 启动Nginx
- 1.11 验证安装
- 2. Vue 项目打包
- 2.1 Vue 项目的目录结构
- 2.2 Vue 项目如何动态指定使用哪个配置文件的？
- 2.3 package.json
- 2.4 Vue 项目动态指定配置文件的秘密
- 2.5 将dist 文件夹内容上传到服务器上
- 3. 修改Nginx 配置文件
- 参考资料
这篇博文我们来学习下如何在阿里云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
安装完成后会生成二进制文件到某个路径下，这个路径待会我们详细说。
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
1.11 验证安装
安装完成后，我们可以输入如下URL地址，检查是否安装成功。
http://IP:80
这里的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
参考资料
本篇完~
