将打包好的vue项目部署到nginx上

目录

1、安装 nginx (我的虚拟机系统是 centos7) 

2、配置 nginx

3、nginx 其他命令


准备环境:

购买一个虚拟服务器:https://www.ucloud.cn/site/active/lagou.html

准备好一个vue项目:我的项目资源(https://gitee.com/daisy_yangyang/fed-e-task-04-02

在虚拟机上安装 nginx

1、安装 nginx (我的虚拟机系统是 centos7) 

 (1)下载本地下载好 nginx 压缩包,我下载的是稳定版 nginx-1.16.1.tar,nginx-1.9.9.tar这个版本我安装不成功,我猜测有可能不稳定导致的报错。保险起见,安装 nginx-1.16.1这个版本.

方式一:从我的百度网盘下载

链接:https://pan.baidu.com/s/1st00qNTO3Ms2-a9jcIBD1w 
提取码:1234

方式二:直接在服务器通过命令行操作下载 nginx

1. cd /user/local
2. mkdir nginx
3. cd nginx
4. wget -c https://nginx.org/download/nginx-1.16.1.tar.gz
5. tar -zxf nginx-1.16.1.tar.gz

(2)将这个压缩包拖进 root 目录里

注:我用的是 FinalShell软件操作的,省的敲命令了,连接服务器和操作文件特方便,有需要的自行下载哈~~~

链接:https://pan.baidu.com/s/1Fh_MwH64BBB2wLK9l9Alqw 
提取码:1234

(3)安装 nginx 所需要的插件

  • 安装 gcc:一般centos7 有的,没有的话自己安装一下,它是编译器,可以编译 C,C++,Ada,Object C和Java等语言
    • yum -y install gcc
  • 安装 pcre、pcre-devel:pcre是一个perl库,包括perl兼容的正则表达式库,nginx的http模块使用pcre来解析正则表达式,所以需要安装pcre库
    • yum install -y pcre pcre-devel
  • 安装 zlib 库:zlib库提供了很多种压缩和解压缩方式nginx使用zlib对http包的内容进行gzip
    • yum install -y zlib zlib-devel
  • 安装 openssl 库:openssl是web安全通信的基石,没有openssl,可以说我们的信息都是在裸奔
    • yum install -y openssl openssl-devel

(4)将压缩解压,最后生成目录 nginx-1.16.1

执行命令:tar -zxvf nginx-1.16.1.tar.gz

(5)进入到解压的 nginx-1.16.1文件夹

cd  /root/nginx-1.16.1 

./configure

make

make install

安装完毕!

(6)启动 nginx

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

2、配置 nginx

 安装完成后,在 usr/local目录下生成了一个 nginx 文件夹。

 (1)部署 vue 项目:在 nginx 新建一个文件夹 static ,里面放 npm run build 打包好的 dist 静态文件内容。

 (2)打开 /usr/local/nginx/conf/nginx.conf 文件,配置参数。

  • # location

  • # root: 将接收到的资源根据 /usr/local/nginx/static 文件夹去查找资源

  • # index: 默认去上述路径中找到index.html或者index.htm

(3)进入到 /usr/local/nginx/sbin 目录,重新载入配置文件,然后重启

  • ./nginx -s reload
  • ./nginx -s reopen
  • 查看 nginx 是否启动成功

(4) 访问你的服务 ip: http://106.75.79.103/

3、nginx 其他命令

  • 启动nginx服务
    • cd usr/local/nginx/sbin
    • ./nginx
  • systemctl stop nginx.service (停止nginx服务)
  • systemctl enable nginx.service (设置开机自启动)
  • systemctl disable nginx.service (停止开机自启动)
  • systemctl status nginx.service (查看服务当前状态)
  • systemctl restart nginx.service (重新启动服务)
  • systemctl list-units --type=service (查看所有已启动的服务)

更多内容再官网学习:https://www.runoob.com/linux/nginx-install-setup.html

Linux 命令手册:http://linux.51yip.com/

Linux 命令大全:https://man.linuxde.net/

工具网站:http://tooool.org/


版权声明:本文为weixin_37883657原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。