如何在Linux服务器上通过宝塔面板部署Vue项目
目录一、目的二、具体步骤2.1 在服务器上安装node环境和Nginx服务器2.2 打包本地项目2.3 上传打包文件到服务器2.4 在服务器上运行项目2.5 使用Nginx代理三、参考链接一、目的需要将本地的Vue项目部署到阿里云服务器上,使得项目可以被公网访问到。二、具体步骤2.1 在服务器上安装node环境和Nginx服务器Vue项目是基于node.js的,首先需要在服务器上安装node环境。
·
一、目的
需要将本地的Vue项目部署到阿里云服务器上,使得项目可以被公网访问到。
二、具体步骤
2.1 在服务器上安装node环境和Nginx服务器
Vue项目是基于node.js的,首先需要在服务器上安装node环境。直接在宝塔面板安装PM2管理器,里面内置了node环境。
同时安装Nginx服务器。
2.2 打包本地项目
我的vue项目是基于nuxt框架,打包命令为
npm run build
2.3 上传打包文件到服务器
新建一个文件夹,将以下四个东西上传到服务器上的新建文件夹中
.nuxt //文件夹
static //文件夹
nuxt.config.js //文件
package.json //文件
2.4 在服务器上运行项目
在终端进入新建文件夹,执行以下命令
npm install //先安装依赖
npm run start //启动项目
2.5 使用Nginx代理
可以看到项目成功启动后运行在 http://localhost:3000 ,公网还无法直接访问。此时还需要用nginx做代理,将公网端口映射到本地3000端口。
用宝塔面板打开刚刚安装的Nginx,进入配置修改导航栏,替换server部分的配置:
server
{
listen 80;
server_name _; #_是指所有的域名匹配
location /{
proxy_pass http://127.0.0.1:3000;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $remote_addr;
}
}
通过上述配置,我将公网的80端口映射到本地3000端口,如此就能通过公网来访问Vue项目啦。
注意:将你希望被访问的端口开放。宝塔面板中的安全栏可以直接设置。
三、参考链接
更多推荐
已为社区贡献1条内容
所有评论(0)