Vue前端项目上传至阿里云服务器,并通过公网IP访问前端网站

一、打包Vue代码为静态文件

1.1 打包发布

vue脚手架只是开发过程中协助开发的工具,真正上线时,需要将vue项目转换成静态资源文件
命令;

yarn build
npm run build//使用npm命令也可,二选一

运行成功界面:
在这里插入图片描述
运行成功后会在项目根目录下生成dist文件夹,如下图:
在这里插入图片描述
dist文件夹下的index.html文件就是打包出的页面文件,上线时将dist文件夹放置到云服务器即可
但此时,去直接打开index.html是无法打开的,这需要下一步,配置相对路径

1.2 配置路径

将项目根目录下的vue.config.js文件下的publicPath添加修改即可。
在这里插入图片描述

1.3 重新打包

yarn build

二、创建阿里云服务器

2.1 注册登录

2.2 创建云服务器(每个个人用户可免费试用三个月,可创建一个云服务器)

创建时其他选项可自行设置,登录云服务器的凭证博主选择的自定义密码
在这里插入图片描述
创建完云服务器之后,在控制台->实例与镜像->实例,可以看到自己刚才创建的云服务器,同时可以在下图的表项里看到服务器的公网ip地址。
在这里插入图片描述

2.3 保证http的80端口可访问

点击实例中的云服务器(上图表项中的蓝色部分),之后点击安全组,如下
在这里插入图片描述
点击上图右侧的管理规则(蓝色部分)
点击入方向-》手动添加,添加80号端口,设置为允许,设置完后如下图(第一条表项):
在这里插入图片描述
至此,服务器的基本配置完成

三、远程连接到服务器

方法一(不建议)

使用实例表项中的远程连接,第一次连接选择vnc远程连接,连接时需要输入开机用户和密码,在上面的设置里已经设置了用户是root 密码是自己设置的,如果忘记了,可以重制密码,在实例表项右侧的操作里可修改
这种方法不方便传输文件,但仅是配置vue项目前端也够用了

方法二:使用finalshell远程连接(之后的命令行内容都是使用finalshell工具)

下载finalshell 或者 xshell+xftp(下列的1,2选则其一即可,博主使用finalshell)
1)finalshell既可以远程控制,也可以传输文件
2)xshell负责远程控制,xftp远程传输文件
finalshell连接云服务器方法:
在这里插入图片描述
连接后需要输入用户名和密码
连接成功界面如下:上半部分输入命令远程控制云服务器,下半部分可视化地从自己的电脑上传输文件给云服务器
在这里插入图片描述

三、配置nginx

nginx是轻量级的web服务器,用于托管网站和应用程序。

3.1 安装nginx所需依赖

yum install pcre
yum install pcre-devel
yum install zlib
yum install zlib-devel

3.2 下载并解压nginx

建议不要下载太早的版本,博主一开始使用1.6.2版本,在后面安装的时候会出现报错,改用了1.8.2版本才ok

wget http://nginx.org/download/nginx-1.6.2.tar.gz//下载
cd /usr/local //解压到local目录
tar -zxvf nginx-1.8.2.tar.gz -C /usr/local

解压完成后再local目录出现nginx-1.8.2文件夹

3.3 进行configure配置

configure文件在/usr/local/nginx-1.8.2下,配置期望在local下生成nginx文件

cd /usr/local/nginx-1.8.2
./configure --prefix=/usr/local/nginx //./configure意思是运行该目录下的configure文件

3.4 编译安装nginx

cd /usr/local/nginx-1.8.2//在这个目录下编译
make && make install

配置编译安装完成后在local文件夹下生成nginx文件夹,nginx安装完成

3.5 启动nginx

cd /usr/local/nginx/sbin //启动文件在sbin文件夹下
./nginx //启动nginx

查看nginx是否启动成功:下面的命令用于列出当前系统上运行的所有进程,然后筛选出只包含 “nginx” ps:显示所有进程 -ef显示完整信息

ps -ef | grep nginx

启动成功可以看到下面的界面,第一行表示root用户开启的nginx进程
在这里插入图片描述
在浏览器输入你的公网IP,应该可以看到welcome to nginx的界面,但还看不到前端界面,需要在nginx的nginx.conf文件作另外的配置(核心)

3.6 看不到nginx界面的原因

1)云服务器的防火墙

systemctl status firewalld//查看防火墙状态,期望是inactivate状态
systemctl stop firewalld//关闭防火墙使其inactivate

在这里插入图片描述
2)云服务器的80端口未开通
在2.3节处有说明
3)nginx服务未启动成功
有可能在后续修改了nginx.conf文件后没有重启nginx,或者kill了进程之后没有启动nginx
重启命令:

./nginx -s reload//在sbin文件下运行 nginx在已开启的状态下执行此命令
./nginx //在sbin文件下运行 nginx在魏开启的状态下执行此命令

至此,web服务器(nginx)启动成功

四、启动vue前端界面

经过前面的步骤,浏览器访问公网ip出现的是welcome to nginx界面,并没有我们想要的网站界面,还需要在/usr/local/nginx/conf/nginx.conf文件做配置

cd /usr/local/nginx/conf/
vim nginx.conf//编辑nginx.confw文件

需要修改http下的server,需要修改以下:
1)listen 80,监听端口80开启,这是http的默认端口
2)server_name localhost
3)loaction /{
root /home/intent_drive/dist (root这里写dist目录)
index index.html index.htm(这里写dist下的静态html文件)
}
配置好后如下图
在这里插入图片描述
保存后需要重新启动nginx

cd /usr/local/nginx/sbin
./nginx -s reload//在sbin文件下运行 nginx在已开启的状态下执行此命令

重启nginx后可以再重新执行ps -ef | grep nginx确保进程开启
netstat -ano | grep 80 可查看80端口被占用情况,如果80端口有其他进程占用,可以kill PID(进程pid)杀死进程,但这个步骤可能将打开的nginx进程误杀,可以kill之后再重新开启进程。

四、END

在浏览器输入公网ip就可以看到前端界面了,如下。
总结:不要过度依赖教程。。。。
在这里插入图片描述

参考:

【1】https://www.bilibili.com/video/BV1HV4y1a7n4?p=139&vd_source=71ddc605b372925416e18a894458e729
【2】https://blog.csdn.net/weixin_45572139/article/details/106085232

Logo

一起探索未来云端世界的核心,云原生技术专区带您领略创新、高效和可扩展的云计算解决方案,引领您在数字化时代的成功之路。

更多推荐