系统城装机大师 - 固镇县祥瑞电脑科技销售部宣传站!

当前位置:首页 > server > anz > 详细页面

服务器使用Nginx部署Vue项目教程图解

时间:2022-04-15来源:www.pcxitongcheng.com作者:电脑系统城

目录
  • 一、安装Nginx
  • 二、部署vue

首先得购买个服务器,在这就不教怎么购买了,本文章使用的是阿里云轻量级服务器CentOS7.6

一、安装Nginx

1. 使用XShell连接我们的服务器

2. 配置 EPEL源

1
2
sudo yum install -y epel-release
sudo yum -y update

3. 安装Nginx

1 sudo yum install -y nginx

以下的内容需要记住,特别是配置文件
安装成功后,默认的网站目录为: /usr/share/nginx/html
默认的配置文件为:/etc/nginx/nginx.conf

4. 开启端口80和443

前提是要先打开防火墙

1 systemctl start firewalld.service

重启防火墙:firewall-cmd --reload
查看防火墙状态firewall-cmd --state
关闭防火墙systemctl stop firewalld.service
开启端口firewall-cmd --add-port=8890/tcp --permanent (8890替换为要开启的那个端口)
开启80和443firewall-cmd --permanent --zone=public --add-service=httpfirewall-cmd --permanent --zone=public --add-service=https
开启后要记得重启防火墙 5. 服务器开启80和443端口号

打开服务器,点击防火墙,然后点击添加规则

在这里插入图片描述

在端口范围那里添加我们需要的就行了,这里我们就添加80和443

在这里插入图片描述

6. Nginx 基本命令

启动:systemctl start nginx
重启:systemctl restart nginx
关闭:systemctl stop nginx
查看状态:systemctl status nginx
开启开机自动启动:systemctl enable nginx
关闭开机自动启动:systemctl disable nginx

7. 验证是否安装成功

在电脑浏览器输入服务器的ip地址,出现欢迎到nginx就代表成功了,那么就可以下一步了

在这里插入图片描述

二、部署vue

1. 打包vue项目

1 npm run build // 这个看情况 如果是版本那么就根据情况

2. 上传到服务器

我们这里是把这个放到了 /usr/local/webapp这个文件夹里面
我们可以使用xftp进行上传

在这里插入图片描述

3. nginx配置

执行 vim /etc/nginx/nginx.conf命令 进入配置文件

在这里插入图片描述

这样我们的vue就部署完成了
记得重启一下nginx

4. 测试

在浏览器输入我们服务器的ip地址加上端口号就可以了

在这里插入图片描述

如果是其他端口那么就要考虑服务器和阿里云有没有开放该端口号

到此这篇关于服务器使用Nginx部署Vue项目的文章就介绍到这了,更多相关Nginx部署Vue项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

分享到:

相关信息

  • Nginx主机域名配置实现

    一、配置多个端口访问不同文件 二、配置不同域名访问不同文件 三、配置不同域名访问同个文件...

    2023-03-17

  • Nginx配置-日志格式配置方式

    上线了一个小的预约程序,配置通过Nginx进行访问入口,默认的日志是没有请求时间的,因此需要配置一下,将每一次的请求的访问响应时间记录出来,备查与优化使用....

    2023-03-17

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载