vue项目部署到服务器上

如何将已经写好的vue项目部署到服务器上

1.首先你得有一台安装了linux系统的服务器或者虚拟机

我测试使用的是虚拟机上的CentOS 7系统,

虚拟机在这里模拟的是服务器,

虚拟机的安装和下载我就不多掰掰了。

如果是服务器的话,初始配置的时候选择linux系统,Ubuntu和CentOS都行

但Ubuntu一般用来学习linux,而CentOS用作服务器系统的比较多

!!!注意!!! 在终端输入命令之前先输入su,切换到root用户,不然很多操作都用不了

image-20220515100153894

2.使用Xshell 连接虚拟机或者服务器上的系统(非必要)

在windows下的Xshell可以远程连接服务器,直接在Xshell里操作系统终端,避免重复进入linux系统的麻烦

image-20220514154612653

链接:这里是Xshell的百度网盘链接
提取码:0922

3.在自己的电脑上下载filezilla

filezilla可以将自己本地的文件传输到服务器上官网下载地址

​ 打开filezilla,新建一个站点

​ 协议 SFTP

​ 主机 (在服务器终端输入ifconfig查看ip地址)

​ 端口号 默认22

​ 用户名 root

image-20220514160123754

这样就连接成功了,右边是服务器的目录结构,把文件拖进去就自动上传了

image-20220514160240779

4.在CentOS 7 上安装Nginx

Nginx同Apache一样都是一种WEB服务器。

是一款自由的、开源的、高性能的HTTP服务器和反向代理服务器;同时也是一个IMAP、POP3、SMTP代理服务器;

Nginx可以作为一个HTTP服务器进行网站的发布处理,另外Nginx可以作为反向代理进行负载均衡的实现。

4.1.安装编译器以及依赖的库文件

yum -y install make zlib zlib-devel gcc gcc-c++ libtool openssl openssl-devel pcre pcre-devel

4.2.下载nginx并解压

cd /usr/local && wget http://nginx.org/download/nginx-1.21.6.tar.gz && tar zxvf nginx-1.21.6.tar.gz

4.3.安装nginx

cd nginx-1.21.6
配置
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-pcre  --with-http_ssl_module
编译和安装
make && make install

4.4.启动、停止、重启nginx

这里的/usr/local/nginx/sbin/nginx是要找到nginx的位置

/usr/local/nginx/sbin/nginx
/usr/local/nginx/sbin/nginx -s stop
/usr/local/nginx/sbin/nginx -s reload

此处参考Centos 7下安装NGINX

5.配置nginx

5.1.创建网站根目录

先回到根目录

mkdir /www
mkdir /html

相当于在根目录下创建了 /www/html 这两级文件

5.2.传输文件

将vue项目使用

yarn build  或者 npm run build

编译打包,会生成一个dist文件夹,将里面的所有文件通过filezilla放在刚刚创建的/www/html下

image-20220514163049571

5.3.配置nginx文件

5.3.1.用vim打开nginx.conf(nginx的配置文件)
vim /usr/local/nginx/conf/nginx.conf
5.3.2.按 i 健进入插入模式

将画圈的地方改成这样,注意分号不能少

按ESC退出插入模式

按冒号:

输入wq 保存退出

image-20220514163538337

6.外网访问

!!!如果在服务器上不需要这一步!,安全组放通端口即可。虚拟机上则需要这一步。!!!

如果按照上面这样设置的话只能在服务器里通过localhost访问

我们还需要配置外网访问

注意上图中画圈的上面有个 server_name

将localhost改为你服务器的ip地址,这样就能在外网访问你的web服务器了

如果是虚拟机且用的是NAT模式的话,192.168…这个只能在同一局域网下访问

:wq保存退出

!!!但是这样还是访问不了,由于服务器防火墙的问题

CentOS7默认使用的是firewall作为防火墙,这里改为iptables防火墙

关闭firewalld

systemctl stop firewalld  
systemctl mask firewalld

使用iptables服务

1、安装iptables防火墙
yum install iptables-services #安装

2、修改文件配置允许80端口
vim /etc/sysconfig/iptables #编辑防火墙配置文件
按i进入文本编辑 在原文档中找到
-A INPUT -m state --state NEW -m tcp -p tcp --dport 22 -j ACCEPT
在该行下面添加
-A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT
:wq! #保存退出


#开放443端口(HTTPS)
iptables -A INPUT -p tcp --dport 443 -j ACCEPT
 
#保存上述规则
service iptables save
 
#开启服务
systemctl restart iptables.service

#设置防火墙开机启动
systemctl enable iptables.service 

防火墙参考整合了一下两篇文章

https://blog.csdn.net/XlxfyzsFdblj/article/details/78724434

https://blog.csdn.net/sinat_29821865/article/details/80982250

7.重启nginx服务器

/usr/local/nginx/sbin/nginx -s reload

大功告成

在服务器浏览器里输入localhost:80 可进入你的项目

在别的浏览器里输入你设置的ip地址也可进入你的项目

image-20220514164134146

  • 1
    点赞
  • 40
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue项目部署服务器下载可以通过以下几个步骤实现: 1. 选择合适的服务器。根据项目的需求和规模,选择适合的服务器供应商。常见的有阿里云、腾讯云等,可以根据自己的需求选择合适的套餐。 2. 注册账号并购买服务器。在服务器供应商的官网上注册账号,并购买适合的服务器套餐。根据项目的需求选择服务器配置,如CPU、内存、存储空间等。 3. 登录服务器控制台。登录服务器供应商的控制台,根据提供的IP地址、用户名和密码登录到服务器。 4. 安装操作系统。根据服务器的操作系统选择对应的安装方式,如Linux或Windows。按照服务器供应商提供的教程安装操作系统。 5. 安装Node.js。Vue项目依赖Node.js环境,需要在服务器上安装Node.js。可以通过官方网站下载安装包或者使用包管理工具进行安装。 6. 配置服务器环境。根据项目的需求,配置服务器环境。比如安装数据库、Web服务器、SSL证书等。 7. 上传Vue项目代码。将本地开发的Vue项目代码通过FTP工具或者命令行工具上传到服务器上。 8. 安装项目依赖。在服务器上进入项目根目录,运行命令安装项目依赖,如npm install。 9. 构建项目。运行构建命令,如npm run build,将Vue项目打包成静态文件。 10. 部署项目。将构建完成的静态文件部署到Web服务器上,配置好域名和访问端口。 11. 启动服务器。运行启动命令,如npm start,启动服务器并运行Vue项目。 通过以上步骤,Vue项目可以成功部署服务器上,供用户访问和使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cwiyc

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值