vue项目部署到服务器上

文章目录

如何将已经写好的vue项目部署到服务器上
- 1.首先你得有一台安装了linux系统的服务器或者虚拟机
- 2.使用Xshell 连接虚拟机或者服务器上的系统（非必要）
- 3.在自己的电脑上下载filezilla
- 4.在CentOS 7 上安装Nginx
- - 4.1.安装编译器以及依赖的库文件
  - 4.2.下载nginx并解压
  - 4.3.安装nginx
  - 4.4.启动、停止、重启nginx
- 5.配置nginx
- - 5.1.创建网站根目录
  - 5.2.传输文件
  - 5.3.配置nginx文件
  - - 5.3.1.用vim打开nginx.conf（nginx的配置文件）
    - 5.3.2.按 **i** 健进入插入模式
    - 5.3.3.外网访问
    - 5.3.4.重启nginx服务器
大功告成

如何将已经写好的vue项目部署到服务器上 1.首先你得有一台安装了linux系统的服务器或者虚拟机

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

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

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

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

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

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

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

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

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

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

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

打开filezilla，新建一个站点

协议 SFTP

主机（在服务器终端输入ifconfig查看ip地址）

端口号默认22

用户名 root

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

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
/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

5.2.传输文件

将vue项目使用

yarn build  或者 npm run build

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

5.3.配置nginx文件 5.3.1.用vim打开nginx.conf（nginx的配置文件）

vim /usr/local/nginx/conf/nginx.conf

5.3.2.按 i 健进入插入模式

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

按ESC退出插入模式

按冒号:

输入wq 保存退出

5.3.3.外网访问

如果按照上面这样设置的话只能在服务器里通过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

5.3.4.重启nginx服务器

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

大功告成

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

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

vue项目部署到服务器上

Linux相关栏目本月热门文章