部署前端项目到服务器

声明:1.我演示使用的是华为云的服务器的Linux 系统
       2.通过宝塔部署项目
       3.项目是vue打包之后的
	   4.其他服务器都差不多一样的配置	       
       5.我是做前端的,下面教程只是个人操作

1.购买服务器

1.1:以下案例我使用的是华为云的服务器
购买服务器后,都有部署教程

有的人可能不知道下面的命令在那里输入,其实下面的命令是在服务器上输入安装宝塔面板(具体在哪安装查看2.2)

1.2:购买成功

2. 点击远程远程登录

2.1.下面的方式都可以(我用的第二个)

2.2.之前提到的安装宝塔的命令要在这里输入,安装过程中需要确认一下,实用教程中都提示了,记得输入y,也可以直接去宝塔官网获取对应的下载命令
宝塔官网：

https://www.bt.cn/

2.3:安装成功后如下图,需要把路径,名称,密码记录下来

2.3.1:有个需要注意的点这里,安装宝塔成功后会给两个路径,直接点击后是打不开面板的,而且也没有下一步的高级选项,你需要在服务器的安全组中设置规则放开这个端口号

2.3.2: 点击下面的服务器名称



2.3.3:然后就可以通过外网链接打开面板了
如果还是打不开,下面是有个高级按钮,点击下面确认安全按钮即可进入

如果有下面的推荐,可以装一下,我也装了,随意,我是为了后期部署后端方便

这是我的全部安装

3.打包vue项目

复制dist目录,到下面目录,新建一个目录把dist复制到里面
路径一定别填错,要和我的一样,目录名随意

注意把这两个文件夹的权限改成777

复制进来之后的样子(这里的权限,随意,暂时没发现什么要求)

创建站点

部署前端,选择php就行,具体原因不解释了

点击提交

创建成功如下

要求是yxx文件夹下,必须有index.html目录,咱们复制的是整个dist,所以需要配置一下,
点击下图的设置–点击网站目录,先确认一下项目目录对不对,
重要的是配置运行目录

重要,重要,重要的来了:---------如果你想配置项目的端口需要在安全中放开这个端口(就是配置规则),同时也要在服务器安全组---安全规则中设置该端口号,服务器要和宝塔同时配置才能生效

默认80等是放开的,不修改的话项目使用的是80端口

这样项目就配置好了,接下来运行

运行项目

如果刚开始,你不知道如何运行项目,如下图
点击网站中的,网站名,再点击域名即可运行了

运行成功自己的项目,记住网址即可

以上就是全部过程了,如有问题或者需要帮助可在评论区告知!