Linux部署nginx发布vue项目

Linux部署nginx发布vue项目首先要安装xshell和xftp

安装路径:

家庭/学校免费 - NetSarang Website (xshell.com)https://www.xshell.com/zh/free-for-home-school/在安装了xshell与xftp后我们需要与服务器建立连接

xshell:

首先我们要新建会话,主机号为服务器的ip地址

 然后在用户身份验证里输入服务器实例的用户名与密码

 设置完毕后即可点击连接

xftp:

新建会话，主机内容为服务器ip地址，用户名与密码仍为服务器实例的用户名和密码

 现在xshell与xftp都与服务器建立连接，我们开始下一步

部署node环境

我们首先进入根目录

 安装nvm

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

在安装完毕后使用 source ~/.bashrc 重启配置

nvm --version验证安装是否成功

然后使用nvm install 版本号 安装node

再 npm install -g pm2 安装一个pm2来管理我们的node进程

安装完毕后我们开始准备nginx的安装

http://nginx.org/en/download.html

 解压后双击nginx.exe，会看到一个黑窗口一闪而过

在任务管理器中可以看到

 配置nginx：

https://blog.csdn.net/zhaoliwen/article/details/106311149

在配置完nginx后我们现在开始准备发布vue项目

上传后端代码

xftp右侧的文件中进入usr文件夹下的local文件夹

 再local文件夹下新建一个文件夹

 将后端的js文件与package.json文件拖到新建的文件夹下面

然后编辑package.json文件

 在scripts中加入   

"serve": "pm2 start index.js --name myapp",
    "stop":"pm2 stop myapp"

然后我们去xshell中通过cd /usr/local/myapp进入myapp文件夹

使用npm i 安装node包

安装完毕后可以使用npm run serve启动

至此后端代码上传完毕

前端文件上传

在xshell上安装依赖

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

 

然后进入usr文件夹下的local文件夹

mkdir nginx 创建nginx文件夹

cd nginx 进入nginx文件夹

 wget http://nginx.org/download/nginx-1.20.1.tar.gz 下载tar包

tar -zxvf nginx-1.20.1.tar.gz 解压

cd nginx-1.20.1

./configure 执行命令

make 执行make命令

make install 执行make install命令

在xftp右侧将打包后的文件拖入html文件夹

 

回到xshell  cd /usr/local/nginx/sbin 进入sbin文件夹

操作命令

启动./nginx
停止./nginx -s stop
重启./nginx -s reload

执行结果 

 

然后便可以使用服务器的ip地址在网页访问项目了