服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

云服务器|WEB服务器|FTP服务器|邮件服务器|虚拟主机|服务器安全|DNS服务器|服务器知识|Nginx|IIS|Tomcat|

服务器之家 - 服务器技术 - Nginx - 服务器使用Nginx部署Vue项目

服务器使用Nginx部署Vue项目

2022-08-05 10:25Tzeao Nginx

本文主要介绍了服务器使用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端口号

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

服务器使用Nginx部署Vue项目

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

服务器使用Nginx部署Vue项目

6. nginx 基本命令

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

7. 验证是否安装成功

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

服务器使用Nginx部署Vue项目

二、部署vue

1. 打包vue项目

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

2. 上传到服务器

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

服务器使用Nginx部署Vue项目

3. nginx配置

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

服务器使用Nginx部署Vue项目

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

4. 测试

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

服务器使用Nginx部署Vue项目

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

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

原文链接:https://blog.csdn.net/weixin_51444617/article/details/123783454

延伸 · 阅读

精彩推荐
  • NginxNginx的try_files指令使用实例

    Nginx的try_files指令使用实例

    这篇文章主要介绍了Nginx的try_files指令使用实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...

    运维之美5882020-01-04
  • Nginx教你如何快速在CentOS7中安装Nginx

    教你如何快速在CentOS7中安装Nginx

    今天我们就只图快不图细的讲解一下如何在CentOS7系统下快速安装Nginx,本文通过图文并茂的形式给大家展示,感兴趣的朋友一起看看吧...

    追风人聊编程4282021-09-26
  • NginxNginx启用gzip压缩的方法示例

    Nginx启用gzip压缩的方法示例

    这篇文章主要介绍了Nginx启用gzip压缩的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...

    标点符3762019-12-24
  • Nginx详解nginx 的 default_server 定义及匹配规则

    详解nginx 的 default_server 定义及匹配规则

    这篇文章主要介绍了详解nginx 的 default_server 定义及匹配规则,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    big_cat6492020-08-11
  • NginxNginx 路由转发和反向代理location配置实现

    Nginx 路由转发和反向代理location配置实现

    本文主要介绍了Nginx 路由转发和反向代理location配置实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    weixin_449532276262021-11-23
  • Nginx为Nginx添加mp4流媒体支持

    为Nginx添加mp4流媒体支持

    这篇文章主要介绍了为Nginx添加mp4流媒体支持的的相关资料,需要的朋友可以参考下 ...

    hebedich29142019-10-25
  • Nginxnginx基于域名,端口,不同IP的虚拟主机设置的实现

    nginx基于域名,端口,不同IP的虚拟主机设置的实现

    这篇文章主要介绍了nginx基于域名,端口,不同IP的虚拟主机设置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需...

    peihhua9742020-12-26
  • NginxNginx 出现 403 Forbidden 最终解决方法

    Nginx 出现 403 Forbidden 最终解决方法

    这篇文章给大家介绍了Nginx 出现 403 Forbidden 最终解决方法,下面分步骤给大家介绍的非常详细,感兴趣的的朋友一起看看吧 ...

    Chinway.Y14482019-12-03