【阿里云新手使用】Vue前端项目上传至阿里云服务器，并通过公网IP访问前端网站

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