vue项目启动之后外网无法访问

Posted 2023-04-12

参考技术A vue-element-admin为基于vue和element的一个著名的后台管理系统。
笔者想在本地中将项目跑起来，于是按照下面的命令将项目启动
【环境：linux cenos】

git clone https://github.com/PanJiaChen/vue-element-admin.git

cd vue-element-admin

npm install

npm run dev

然后提示启动成功。
但是在浏览器访问该服务器的ip地址+端口发现无法访问
然后在服务器上curl 该ip地址+端口可以得到结果。
但是该服务器其他服务均运行正常。

此时我按照网上的说法将webpack中的devServer的host改为‘0.0.0.0’，再次启动发现不起作用。
然后我在package.json中将script中的内容改为：

然后再次启动项目

访问地址发现可以访问成功。

原因：初步猜测是端口没有开放的原因。

centos 中，启用了 firewalld 防火墙，docker 内的容器无法访问外网

首先记录几个对 linux 系统服务操作的命令（以下都是对防火墙服务进行操作）：

# 启动服务
systemctl start firewalld

# 设置服务自启动
systemctl enable firewalld

# 取消服务自启动
systemctl disable firewalld

# 停止服务
systemctl stop firewalld

# 查看服务状态
systemctl status firewalld

# 重启服务
systemctl restart firewalld

 

另外如果在防火墙上配置例外端口，可以执行下面命令：

# 添加端口例外（添加时需要开启防火墙服务，添加后需要重启防火墙服务以生效）
firewall-cmd --add-port=8000/tcp --permanent

# 移除端口例外

firewall-cmd --remove-port=8000/tcp –permanent

# 配置 docker 容器内允许访问外部网络（需重启 firewalld、docker 以生效）
firewall-cmd --permanent --zone=trusted --change-interface=docker0

# 验证容器内对外部的访问（检查 DNS 解析结果是否正常）
docker run --rm busybox nslookup baidu.com

 

下面是一些 linux 中常用的网络命令记录：

# 验证网站访问
curl http://baidu.com/

# 查看 dns
nslookup baidu.com

# 查看网络信息
ifconfig

# 查看网卡
ip link

# 删除网卡
ip link delete docker0

# 查看路由表
ip route

# 查看 nat 表
iptables -t nat -L -n

# 启用 ip 转发
sysctl net.ipv4.conf.all.forwarding=1
sudo iptables -P FORWARD ACCEPT

 

参考：
https://www.cnblogs.com/zl1991/p/10531726.html
https://unix.stackexchange.com/questions/199966/how-to-configure-centos-7-firewalld-to-allow-docker-containers-free-access-to-th

参考：
https://docs.docker.com/network/bridge/
https://docs.docker.com/v17.09/engine/userguide/networking/default_network/custom-docker0/
https://docs.docker.com/v17.09/engine/userguide/networking/default_network/binding/