乐趣区

关于nginx:使用虚拟机搭建本地服务器来部署一个Vue应用

jiezi

一、后期筹备

  • 虚拟机：VMware16
  • Linux：CentOS-7（能够先下载 .torrent 后缀的种子文件，再应用迅雷下载，下载速度会更快）

二、装置 centos7 零碎

1. 创立新的虚拟机

菜单栏 > 找到文件 > 点击“新建虚拟机”

跟着提醒下一步就行了，始终到设置磁盘

2. 配置磁盘

3. 装置零碎

  1. 编辑虚拟机设置 > 硬件 >CD/DVD(IDE)> 选中“应用 ISO 映像文件”> 抉择你的 CentOS 零碎
  1. 启动虚拟机，点击“开启此虚拟机”。

鼠标点击虚拟机空白处 > 用键盘的↑键选中“Install Cent0S 7”> 按回车，进入系统配置界面；

  1. 设置日期和工夫，鼠标点击中国的地位 \>City 搜寻框输出“shanghai(上海)”按回车键，小红点会主动定位在上海坐标 \> 最初把工夫设置成 24 小时制
  1. 抉择零碎环境，这里虚拟机就抉择图形界面了，个别服务器是抉择默认最小装置
  1. 抉择磁盘
  1. 开启网络
  1. 设置 root 明码和设置用户

重启完之后先设置承受许可证，点击右下角的 finish 就进入下一步设置

接下来就是始终点右上角的 next 和 skip 就好了

记得最初要用 root 用户进入零碎，不然会有很多权限问题

4. 网卡配置

终端输出ifconfig, 查看网卡信息

查看网卡设施配置信息

vi /etc/sysconfig/network-scripts/ifcfg-ens*（* 依据理论状况不同，这里为 ens33，就是上图中箭头指向的网卡名称）

默认的配置信息如下

TYPE="Ethernet"
PROXY_METHOD="none"
BROWSER_ONLY="no"
BOOTPROTO="dhcp"
DEFROUTE="yes"
IPV4_FAILURE_FATAL="no"
IPV6INIT="yes"
IPV6_AUTOCONF="yes"
IPV6_DEFROUTE="yes"
IPV6_FAILURE_FATAL="no"
IPV6_ADDR_GEN_MODE="stable-privacy"
NAME="ens33"
UUID="68c0ad50-b291-4ef9-aec0-24c5a6819005"
DEVICE="ens33"
ONBOOT="yes"

批改网卡配置

// 批改以下内容 
BOOTPROTO=static  // 启用动态 IP 地址 

// 增加以下内容
IPADDR=192.168.19.130      // 设置 IP 地址 这里地址和下面 ifconfig 图外面箭头指向的 IP 地址
NETMASK=255.255.255.0   // 子网掩码 
GATEWAY=192.168.19.2   // 设置网关 网关地址在点击虚拟机最上一排菜单 -> 编辑 -> 虚构网络编辑器 -> NAT 设置查看
DNS1=192.168.19.2 // DNS 地址，和下面的网关地址统一

批改结束后，按 esc 进入到 命令模式, 按住 shift + : 键, 接着再输出 wq, wq 是保留并退出, q 就是示意退出，最初重启网卡。

systemctl restart network

然而我这重启网卡也没用，最初重启零碎了🤪

三、装置 nginx

创立 nginx 目录mkdir nginx && cd nginx

1. 装置 nginx 依赖：pcre

  1. 下载 pcre
wget http://downloads.sourceforge.net/project/pcre/pcre/8.37/pcre-8.37.tar.gz
  1. 解压 pcre
tar -xzpvf pcre-8.37.tar.gz
  1. 进入 pcre-8.37 执行命令
./configure
  1. 执行命令
make && make install
  1. 验证 pcre 是否胜利
pcre-config --version
# 呈现版本号就是装置胜利了

2. 装置 openssl、zlib、gcc 依赖

运行命令

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

3. 装置 nginx

  1. 进入之前创立的 nginx 目录：下载 nginx
wget http://nginx.org/download/nginx-1.20.1.tar.gz
  1. 解压 nginx
tar -zxvf nginx-1.20.1.tar.gz
  1. 进入 nginx-1.20.1 目录，执行
./configure
  1. 编译
make && make install

4. 启动 nginx

进入/usr/local/nginx/sbin，启动 nginx

cd /usr/local/nginx/sbin
./nginx

查看 nginx 是否启动

ps -ef | grep nginx

5. 拜访 nginx

浏览器输出服务器 ip+80 端口：例如：192.168.1.12:80, 呈现如下界面为胜利

6. 关上 80 端口

因为 nginx 初始配置启动的是 80 端口，零碎设置默认都是敞开的，运行命令开启 80 端口

firewall-cmd --zone=public --add-port=80/tcp --permanent

执行完呈现 success 之后，重启防火墙配置

firewall-cmd --reload

通过查看零碎凋谢的端口号，来查看配置是否失效

firewall-cmd --list-all

四、部署利用

1. 复制打包文件

其实就是把 vue 的打包文件复制到 nginx 的 html 目录外面😁😁

2. 设置 History 路由

路由设置 History 模式之后，浏览器刷新页面会呈现 404 的状况，这里就还须要再配置下 nginx

首先关上 nginx 的配置文件

这里就依据官网来进行设置，把代码复制到 config 外面

# 这个配置的意思就是无法访问门路时，依据设置的文件程序来匹配进行拜访
location / {try_files $uri $uri/ /index.html;}

保留之后，终端进入 /usr/local/nginx/sbin 目录，./nginx -s reload重启 nginx;

到这，一个残缺的部署流程就结束了😉

因为只是本地部署，所以这里还疏忽了很多细节，用最快的形式来做的环境搭建，能够拜访上面的链接来看更具体的内容哦

参考链接

  • Centos 零碎上 nginx 装置
  • 虚拟机装置 CentOS7 零碎及常用工具配置
退出移动版