「手把手系列1」 Linux从零部署Vue + Egg 全栈项目之【Nginx搭建部署Vue】

306 阅读1分钟
        

Linxu环境:腾讯云 轻量应用服务器部署 CentOS 8.2

系列文章:

「手把手系列1」 Linux从零部署Vue + Egg 全栈项目之【Nginx搭建部署Vue】

「手把手系列2」 Linux从零部署VUE + EGG 全栈项目之【mysql安装】

「手把手系列3」 Linux从零部署VUE + EGG 全栈项目之【EGG部署】

一、准备工作

1.买好服务器之后,需要先设置一下ssh的密码

image-20220711094338240.png

image-20220711094406127.png

image-20220711094429799.png

2.通过ssh远程登录

ssh root@公网ip地址

输入刚才设置的密码

image-20220711134744110.png

二、node环境安装

1.从node官网下载node包

先进入根目录

cd ~

wget https://cdn.npmmirror.com/binaries/node/v16.15.1/node-v16.15.1-linux-x64.tar.xz

2.解压node包

tar -xvf node-v16.15.1-linux-x64.tar.xz

3.配置环境变量

进入etc目录,编辑profile文件

cd ~

cd /etc

vi profile

最后一行添加

export PATH=$PATH:/root/node-v16.15.1-linux-x64/bin

:wq保存退出

4.重新执行profile文件

source profile

5.检验是否安装成功

node -v

image-20220711102934736.png

安装成功!

三、nginx的安装

1.前置各种依赖的安装

yum install gcc-c++

yum install -y pcre pcre-devel

yum install -y zlib zlib-devel

yum install -y openssl openssl-devel

2.nginx下载及编译
  1. 先从nginx官网下载压缩包

    wget http://nginx.org/download/nginx-1.23.0.tar.gz

  2. 解压nginx

    tar -zxvf nginx-1.23.0.tar.gz

  3. 进入nginx文件夹内

    cd nginx-1.23.0

  4. 执行nginx-configure文件

    ./configure

  5. make编译

    make

    make install

  6. 查询nginx 安装目录并进入

    whereis nginx

    image-20220711100254615.png

    进入得到的目录

    cd /usr/local/nginx

  7. 进入sbin启动nginx

    cd sbin

    ./nginx

  8. 打开公网ip,出现nginx界面说明安装成功

image-20220711100621711.png

注意: 如步骤8正常访问,请继续看步骤9,忽略此段文字,如果打开公网ip,未出现上图页面,则需手动配置安全组,以阿里云为例,需要手动配置80端口。

输入 netstat -atnlp | grep 80,检查80窗口使用情况,发现nginx已正常运行

image.png

在【阿里云控制台】-【安全组】页面手动添加80窗口,重新刷新公网IP页面即可。

image.png

  1. 配置nginx环境变量

    cd ~

    cd /etc

    vi profile

    最后一行添加 export PATH=$PATH:/node-v16.15.1-linux-x64/bin:/usr/local/nginx/sbin

    :wq保存退出

    重新执行profile文件

    source profile

四、nginx常用命令

1.nginx 启动nginx
2. nginx -s stop 关闭nginx (粗暴关闭)
3.nginx -s quit 优雅关闭nginx(退出前完成已经接受的请求处理)
4.nginx -s reload 重载nginx配置文件
5.ps -ef | grep nginx 查看nginx进程

五、将本地dist文件上传到nginx中

1. 上传到服务器/usr/local/nginx/html文件中

命令行上传 put -r 本地文件路径 /usr/local/nginx/html/

或者 通过可视化文件上传

image-20220711145958869.png

2.修改nginx配置

cd /

cd /usr/local/nginx/conf

vim nginx.conf

image-20220711150816639.png

在locaition / 对象中将以下内容复制

root  html/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;

:wq保存退出

3.重新启动nginx

nginx -s reload

六、结尾

💡给大家奉上仓库地址!

💡vue前端项目,Vue2全家桶 + Antd UI + Axios + Less

💡egg后台项目,Egg.js + Sequelize + Jwt