今天,为大家详细介绍如何从零开始部署一个 Vue 项目,让每个人都能轻松上手。
本文将涵盖以下几个方面:
目录
申请服务器:云主机-云服务器-弹性云主机-ECS - 天翼云
下载资源:FinalShell SSH工具,服务器管理,远程桌面加速软件,支持Windows,macOS,Linux,版本4.5.11,更新日期2024.10.28 - FinalShell官网(https://www.hostbuf.com/t/988.html)
登录天翼云后台,找到弹性云主机,点击管理,关机,选择右上角 -更多 - 一键重装
更换操作系统
镜像: centos 7.9 64位
安全设置: 自定义密码
获取到 服务器公网的IP地址: 255.255.255.0(公网IP)
打开finalshell,点击 添加服务器,选择 ssh 连接
名称: 随意就好
主机: 服务器的公网IP地址
用户名: root
密码: 自定义密码
选择 你添加服务器,双击即可,接受并且保存密码, 出现光标即为正常连接了服务器
什么是Nginx ?
Nginx 是俄罗斯人 Igor Sysoev 编写的轻量级Web服务器,它的发音为 [ˈendʒɪnks] ,它不仅是一个
高性能的 HTTP 和反向代理服务器,同时也是一个 IMAP/POP3/SMTP 代理服务器。
事实上nginx的并发能力确实在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等。
Nginx 以事件驱动的方式编写,所以有非常好的性能,同时也是一个非常高效的反向代理、负载均衡服
务器。在性能上, Nginx 占用很少的系统资源,能支持更多的并发连接,达到更高的访问效率;在功能
上, Nginx 是优秀的代理服务器和负载均衡服务器;在安装配置上, Nginx 安装简单、配置灵活。
Nginx 支持热部署,启动速度特别快,还可以在不间断服务的情况下对软件版本或配置进行升级,即使
运行数月也无需重新启动。
Nginx 可以作为一个 HTTP 服务器进行网站的发布处理,另外 Nginx 可以作为反向代理进行负载均衡的实现。
Nginx 能做什么?
正向代理
反向代理
负载均衡
HTTP服务器(包含动静分离)
- sudo yum update -y
- sudo yum install epel-release -y
- sudo yum install nginx -y
- sudo systemctl start nginx
- sudo systemctl enable nginx
6.检查 Nginx 状态
- sudo systemctl status nginx
你可以通过以下命令来确认 Nginx 是否已经设置为开机自启动:
这个命令会返回以下几种可能的结果:
如果你发现 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
- ls -la /usr/share/nginx/html
- cat /usr/share/nginx/html/index.html
以后就可以把资源文件上传到此处
使用nvm安装多版本的node
NVM(Node Version Manager)是Node.js的版本管理软件,使您可以轻松在Node.js各个版本间进行切换。适用于长期做 node 开发的人员或有快速更新node版本、快速切换node版本的场景。
使用git将源码克隆到本地的~/.nvm目录下,并检查最新版本。
- sudo yum update -y
- sudo yum install -y curl
- curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
- 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
- nvm install --lts
你也可以安装特定版本,例如 v18.12.1
- nvm install 18.12.1
- npm -v
默认情况下,直接运行以下命令即可完成打包
- npm run build
需要注意到,默认打包出来的项目,css以及js引入的方式都是绝对路径,建议修改为相对路径的引入方式
打开vue.config.js文件,修改 publicPath 为 './'即可
一定要查看路由的模式是不是为 hash 模式
修改vue项目中的数据请求的地址
- npm run build
将目录 dist 文件夹拖动到/usr/share/nginx/html目录下
- sudo systemctl reload nginx
浏览器测试 http://你的主机公网IP/
如果服务器内部curl 公网IP 可以访问到nginx页面但是外网不可以,可能是端口占用或为开放
如果你决定将 Nginx 监听的端口从 80 改为 90,可以按照以下步骤进行操作:
编辑 Nginx 的配置文件,将监听端口从 80 改为 90。
- 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;
- }
确保 Nginx 服务重新加载了最新的配置文件。
- sudo systemctl restart nginx
确保 Nginx 服务正在运行。
- sudo systemctl status nginx
确保防火墙允许外部访问端口 90。
- 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
确保天翼云的安全组设置允许外部访问端口 90。
使用 curl 命令测试端口 90 是否开放。
- curl 公网IP:90
使用在线端口检测工具,例如:
在这些网站上输入你的 IP 地址 公网IP 和端口 90,它们会告诉你端口是否开放。
虽然 Nginx 及其依赖项的安装过程开始了一部分,但由于某些依赖项的下载失败,导致整个安装过程没有完成。这通常是因为 CentOS 7 的官方仓库已经停止更新,导致一些包无法下载。
- sudo cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup
- sudo wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo
- sudo yum clean all
- sudo yum makecache
- sudo vi /etc/yum.repos.d/nginx.repo
在文件中添加以下内容:
- [nginx]
- name=nginx repo
- baseurl=http://nginx.org/packages/centos/7/$basearch/
- gpgcheck=0
- enabled=1
- sudo yum install nginx -y
- sudo systemctl start nginx
- sudo systemctl enable nginx
- sudo systemctl status nginx
如果你希望使用 HTTPS,可以配置 Nginx 使用 SSL/TLS。你可以使用 Let's Encrypt 免费获取 SSL 证书。
- bashsudo yum install epel-release -y
- sudo yum install certbot python2-certbot-nginx -y
- sudo certbot --nginx -d 你的公网IP
按照提示操作,Certbot 会自动修改 Nginx 配置文件并重启 Nginx。
- sudo tail -f /var/log/nginx/error.log
- sudo nginx -t
- sudo lsof -i :80
- sudo lsof -i :90
- ip a
- cat /etc/resolv.conf
- ip route
- sudo ufw status
- sudo ufw allow 80/tcp
- sudo ufw allow 90/tcp
- sudo ufw reload
通过本文,我们详细介绍了如何从零开始部署一个 Vue 项目。无论你是前端小白还是有一定经验的开发者,希望这些步骤和命令能帮助你顺利地将你的 Vue 项目部署到服务器上。