龙空技术网

15分钟将Vue项目部署到云服务器,使用宝塔面板

嗨米思 200

前言:

如今小伙伴们对“html网页部署到云服务器”可能比较着重,我们都想要知道一些“html网页部署到云服务器”的相关知识。那么小编也在网络上网罗了一些有关“html网页部署到云服务器””的相关知识,希望小伙伴们能喜欢,大家快快来了解一下吧!

宝塔面板是一个高效的服务器运维面板。

在使用之前,将项目部署到云服务器[Linux系统],需要手工输入命令安装各类软件,操作起来费时费力并且容易出错,而且需要记住很多Linux的命令,非常复杂。

使用宝塔面板可以非常方便的管理服务器,使用按键替代以前复杂繁多命令,且操作简单。对新手来说,免费版就能解决绝大部份的问题。

网址:

安装宝塔面板

在线安装,打开宝塔网站

步骤 一

步骤 二,填写之后点 [立即安装到云服务器]

注意事项

安装前请确保是 【全新的机器】 ,没有安装其他任何环境,否则会影响您的业务使用!

更多请查看右边的注意事项

等待自动安装完成(大概10分钟),安装成功后将返回面板登录信息,注意保存

安装成功,注意保持面板信息

如何查看公网IP,以阿里云为例子。

登录阿里云 > 概述 > 我的资源 > 云服务器ECS[点击] > 实例与镜像 > 实例[点击]

阿里云服务器,查看公网IP

在服务器上建立网站

一 登录面板

在浏览器中输入面板地址(安装成功后返回的面板地址),如果打不开,可能需要到云服务器的安全组中放行8888端口。

使用账号和密码登录(安装成功后返回的账号和密码)。

二 安装Nginx和PHP

在面板左边菜栏点[软件商店],搜索应用进行安装。

安装 PHP 和 Nginx

三 建立PHP站点

网站 > PHP项目 > 添加站点

添加 PHP 站点

PHP版本选择 纯静态

编译Vue项目 npm run build,在项目目录下生成 ./dist 目录,将./dist目录上传到刚创建的站点中。

点 根目录

将 ./dist 目录上传到站点的根目录中

配置

点 网站名 进入配置

修改运行目录为: /dist

添加

服务器放行端口

安全(宝塔面板) > 添加端口规则

放行端口

云安全组放行端口,阿里云为例

阿里云 > 概述 > 我的资源 > 云服务器ECS[点击] > 网络与安全 > 安全组[点击]

云服务器添加安全组

如果是域名访问需要添加域名解析,还是以阿里云为例

阿里云 > 概述 > 我的资源 > 域名[点击] > 全部域名下的数字,进入域名列表,在对应的域名点解析。

点解析

添加域名解析,可能需要10分钟起效

注意:要解析域名,最好先要域名备案

在浏览器中输入域名或公网IP:端口就可以访问页面了。

标签: #html网页部署到云服务器