更新系统包：
```
sudo yum update -y
```
安装 EPEL 仓库（Nginx 不在默认的 Red Hat 仓库中，需要添加 EPEL 仓库）：
```
sudo yum install epel-release -y
```
安装 Nginx：
```
sudo yum install nginx -y
```
启动 Nginx 服务：
```
sudo systemctl start nginx
```
设置 Nginx 开机自启：

sudo systemctl enable nginx

6.检查 Nginx 状态

sudo systemctl status nginx

你可以通过以下命令来确认 Nginx 是否已经设置为开机自启动：

这个命令会返回以下几种可能的结果：

enabled：表示 Nginx 已经设置为开机自启动。
disabled：表示 Nginx 没有设置为开机自启动。
static：表示该服务不能被直接启动，但可以作为依赖项由其他服务启动。

如果你发现 Nginx 没有设置为开机自启动，可以使用以下命令来设置：

sudo systemctl enable nginx

设置完成后，再次运行 sudo systemctl is-enabled nginx 来确认是否已经成功设置为开机自启动。

配置防火墙

如果防火墙是启用的，需要允许 HTTP 和 HTTPS 流量。

sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --permanent --add-service=https
sudo firewall-cmd --reload

浏览器中输入公网ip地址，出现如下界面代表nginx已经安装成功

如果出现如下页面，也不要着急

ICP备案后放行的端口

80/8080/443/8443端口必须完成ICP备案（域名/网站备案）后才可开通使用。根据《非经营性互联网信息服务备案管理办法》(信息产业部令第33号)，在中国境内无备案记录的域名不可上线。

所以我们需要更改nginx端口,我这边修改的为90

4.3 给服务器的安全组添加需要使用的端口号

4.4查看nginx默认的web文件位置

ls -la /usr/share/nginx/html

cat /usr/share/nginx/html/index.html

以后就可以把资源文件上传到此处

5.服务器安装node环境

使用nvm安装多版本的node

NVM（Node Version Manager）是Node.js的版本管理软件，使您可以轻松在Node.js各个版本间进行切换。适用于长期做 node 开发的人员或有快速更新node版本、快速切换node版本的场景。

使用git将源码克隆到本地的~/.nvm目录下，并检查最新版本。

在 CentOS 上安装 nvm 和 Node.js

更新系统包：
```
sudo yum update -y
```
安装依赖包：
```
sudo yum install -y curl
```

安装 nvm：使用 curl 下载并安装 nvm：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

加载 nvm：安装脚本会提示你重新加载 shell 配置文件。你可以通过以下命令来加载 nvm：

bashexport NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

为了使这些更改永久生效，你可以将上述命令添加到你的 ~/.bashrc 或 ~/.zshrc 文件中：

bashecho 'export NVM_DIR="$HOME/.nvm"' >> ~/.bashrc
echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> ~/.bashrc
echo '[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"' >> ~/.bashrc

然后重新加载你的 shell 配置文件：

source ~/.bashrc

安装 Node.js：使用 nvm 安装特定版本的 Node.js。例如，安装最新的 LTS 版本：
```
nvm install --lts
```
你也可以安装特定版本，例如 v18.12.1
```
nvm install 18.12.1
```
验证安装：检查 Node.js 和 npm 是否安装成功：
```
npm -v
```

6. 打包|部署vue项目

默认情况下，直接运行以下命令即可完成打包

npm run build

需要注意到，默认打包出来的项目，css以及js引入的方式都是绝对路径，建议修改为相对路径的引入方式

打开vue.config.js文件，修改 publicPath 为 './'即可

一定要查看路由的模式是不是为 hash 模式

修改vue项目中的数据请求的地址

 npm run build

将目录 dist 文件夹拖动到/usr/share/nginx/html目录下

重新加载Nginx配置：
```
sudo systemctl reload nginx
```

浏览器测试 http://你的主机公网IP/

7.常见问题及解决方法

7.1更改nginx端口

如果服务器内部curl 公网IP 可以访问到nginx页面但是外网不可以,可能是端口占用或为开放

如果你决定将 Nginx 监听的端口从 80 改为 90，可以按照以下步骤进行操作：

1. 修改 Nginx 配置文件

编辑 Nginx 的配置文件，将监听端口从 80 改为 90。

编辑 `nginx.conf`

sudo vi /etc/nginx/nginx.conf

将 listen 80; 改为 listen 90;。

user  nginx;
worker_processes  auto;
error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;
    sendfile        on;
    server {
    listen 90;
    server_name 公网IP;
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
    }
}
    #tcp_nopush     on;
    keepalive_timeout  65;
    #gzip  on;
#    include /etc/nginx/conf.d/*.conf;
}

2. 重启 Nginx 服务

确保 Nginx 服务重新加载了最新的配置文件。

sudo systemctl restart nginx

3. 检查 Nginx 状态

确保 Nginx 服务正在运行。

sudo systemctl status nginx

4. 检查防火墙设置

确保防火墙允许外部访问端口 90。

检查 `iptables` 规则

sudo iptables -L -n | grep 90

确保有以下规则：

plaintext

ACCEPT     tcp  --  0.0.0.0/0            0.0.0.0/0            tcp dpt:90 ctstate NEW,UNTRACKED

如果没有这条规则，可以添加它：

sudo iptables -A INPUT -p tcp --dport 90 -j ACCEPT

保存 iptables 规则：

sudo service iptables save

5. 云服务商的安全组设置

确保天翼云的安全组设置允许外部访问端口 90。

登录天翼云控制台

打开浏览器，登录到天翼云控制台。
导航到“安全组”设置。
选择你服务器所属的安全组。
添加入站规则：
- 协议类型：TCP
- 端口范围：90
- 源地址：0.0.0.0/0

6. 从外部网络测试

使用 curl 命令测试端口 90 是否开放。

curl 公网IP:90

7. 使用在线工具测试

使用在线端口检测工具，例如：

YouGetSignal（https://www.yougetsignal.com/tools/open-ports/）

在这些网站上输入你的 IP 地址 公网IP 和端口 90，它们会告诉你端口是否开放。

7.2 rpm -q nginx 未安装软件包 nginx

虽然 Nginx 及其依赖项的安装过程开始了一部分，但由于某些依赖项的下载失败，导致整个安装过程没有完成。这通常是因为 CentOS 7 的官方仓库已经停止更新，导致一些包无法下载。

解决方案

更换镜像源：你可以更换为其他更稳定的镜像源，例如阿里云的镜像源。
安装 Nginx 仓库：使用 Nginx 官方提供的仓库来安装 Nginx。

更换镜像源

备份当前的 YUM 配置文件：

sudo cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup

下载并替换为阿里云的 YUM 配置文件：

sudo wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo

清理缓存并更新 YUM 缓存：
```
sudo yum clean all
sudo yum makecache
```

使用 Nginx 官方仓库安装 Nginx

添加 Nginx 官方仓库：

sudo vi /etc/yum.repos.d/nginx.repo

在文件中添加以下内容：

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/7/$basearch/
gpgcheck=0
enabled=1

安装 Nginx：
```
sudo yum install nginx -y
```
启动 Nginx 服务：
```
sudo systemctl start nginx
```
设置 Nginx 开机自启动：
```
sudo systemctl enable nginx
```
检查 Nginx 状态：
```
sudo systemctl status nginx
```
验证 Nginx 安装：打开浏览器，访问你的服务器 IP 地址，例如 http://你的公网IP，应该会看到 Nginx 的默认欢迎页面。

7.3 配置 HTTPS（可选）

如果你希望使用 HTTPS，可以配置 Nginx 使用 SSL/TLS。你可以使用 Let's Encrypt 免费获取 SSL 证书。

安装 Certbot

bashsudo yum install epel-release -y
sudo yum install certbot python2-certbot-nginx -y

获取并安装 SSL 证书

sudo certbot --nginx -d 你的公网IP

按照提示操作，Certbot 会自动修改 Nginx 配置文件并重启 Nginx。

7.4 Nginx 无法启动

1. Nginx 无法启动

检查日志：

sudo tail -f /var/log/nginx/error.log

检查配置文件语法：
```
sudo nginx -t
```
检查端口冲突：
```
sudo lsof -i :80
sudo lsof -i :90
```

2. 网络不通

检查网络配置：
```
ip a
```
检查 DNS 配置：
```
cat /etc/resolv.conf
```
检查路由表：
```
ip route
```

3. 防火墙阻止

检查防火墙状态：
```
sudo ufw status
```
允许 80 端口：
```
sudo ufw allow 80/tcp
```
允许 90 端口：
```
sudo ufw allow 90/tcp
```
重新加载防火墙规则：
```
sudo ufw reload
```
通过本文，我们详细介绍了如何从零开始部署一个 Vue 项目。无论你是前端小白还是有一定经验的开发者，希望这些步骤和命令能帮助你顺利地将你的 Vue 项目部署到服务器上。

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

来顶一下

返回首页

上一篇:从入门到精通：Vue3一篇文章搞定！下一篇:Vue 3集成海康Web插件实现视频监控

记录在本地电脑部署自	围棋入门教程十天即
围棋下法	Grid-A-Licious 基于