前端部署分为以下几个步骤
- 下载并安装虚拟机(VMware)
1.1 ip addr(查看虚拟机的ip地址)
1.2 vi /etc/sysconfig/network-scripts/ifcfg-ens33(连接网络)
1.3 /etc/init.d/network restart(重启)
- 安装操作系统的软件
Xshell 6(https://www.netsarang.com/zh/downloading)
Xftp 6(https://www.netsarang.com/zh/downloading)
- 安装依赖的包
3.1 $ yum install gcc-c++
3.2 $ yum install pcre pcre-devel
3.3 $ yum -y install zlib zlib-devel
3.4 $ yum -y install openssl openssl-devel
3.5 $ yum install nginx(百度nginx去到官网右侧的download -> nginx-1.170复制地址)
3.6 $ wget (nginx-1.170地址) 失败!!
3.7 $ yum install wget
3.8 重新3.6步骤!
- 解压包
$ tar -zxvf nginx-1.17.0.tar.gz
- 进入到解压后的包,编译相应的configure文件
5.1 cd / 回到根目录 (cd .. 回到上一级目录 , cd ~ 回到用户主目录)
5.2 cd root/nginx-1.17.0 去到此处
5.3 ls 查看当前目录文件名
5.4 ./configure 编译
5.5 make
5.6 make install
- 配置防火墙
$ firewall-cmd --zone=public --add-port=80/tcp --permanent
(默认http协议发送信息需要你确认后才再次发送)
$ firewall-cmd --zone=public --add-port=80/udp --permanent
(http协议持续发送信息,不需要你确认)
说明: 如果没有配置并重启防火墙将看不到对应的80端口号.
- 重启防火墙
$ firewall-cmd --reload
或(systemctl stop firewalld.service --> systemctl start firewalld.service)
- 再次回到 sbin 启动(重启) nginx (/usr/local/nginx/conf)
$ vim nginx.conf(编辑)
补充: vim 安装 (1.yum search vim; 2.yum install vim-enhanced -y)
- 进入到nginx.conf文件内,将项目中的配置文件(vue.config.js)的反向代理编辑到nginx.conf中,编译完成之后 ./nginx -s reload(或./nginx启动)
编辑nginx配置
10.将项目 npm run build 后会生成一个dist文件夹,并将该文件夹内的所有内容拷贝到 /usr/local/nginx/html 中
11.在浏览器中使用虚拟机的IP地址即可看到项目内容(已完成部署)!
附加一键部署
1. 将整个项目代码的文件cp到根目录文件夹下的mnt
2. 去到Node.js官网,找到Linux Binaries (x64)下载地址
3. wget (node.js地址)
4. tar -zxvf 压缩包
5. 进入到解压包
6. ./configure
7. make
8. make install
9. 再次回到mnt找到项目就可以直接在centos系统中直接启动项目
10. npm intall
11. npm run build
12. cp -r /mnt/trunk/dist/* /usr/local/nginx/html
一键部署:将上述10,11,12命令行放在一个xxx.sh结尾的文件中
cd /mnt/trunk;
npm install;
npm run build;
cp -r /mnt/trunk/dist/* /usr/local/nginx/html;
再执行以下代码
dos2unix xxx.sh
chmod 700 xxx.sh
./xxx.sh
关于nginx的常用指令
nginx 启动
nginx -s reload 重新启动
nginx -s stop 停止
ps -ef | grep nginx 查看nginx进程是否运行
netstat -unltp | grep nginx 查看nginx端口监听情况
nginx -v 查看版本
nginx -t 检查nginx的配置文件
nginx -h 查看帮助信息
nginx -V 详细版本信息，包括编译参数
nginx -c filename 指定配置文件
nginx -s quit 退出
