部署前端项目到服务器

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

1.购买服务器

1.1:以下案例我使用的是华为云的服务器
购买服务器后,都有部署教程
在这里插入图片描述
有的人可能不知道下面的命令在那里输入,其实下面的命令是在服务器上输入安装宝塔面板(具体在哪安装查看2.2)
在这里插入图片描述

1.2:购买成功

在这里插入图片描述

2. 点击远程远程登录

在这里插入图片描述
2.1.下面的方式都可以(我用的第二个)
在这里插入图片描述
2.2.之前提到的安装宝塔的命令要在这里输入,安装过程中需要确认一下,实用教程中都提示了,记得输入y
在这里插入图片描述
2.3:安装成功后如下图,需要把路径,名称,密码记录下来
在这里插入图片描述
2.3.1:有个需要注意的点这里,安装宝塔成功后会给两个路径,直接点击后是打不开面板的,而且也没有下一步的高级选项,你需要在服务器的安全组中设置规则放开这个端口号
在这里插入图片描述
2.3.2: 点击下面的服务器名称
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2.3.3:然后就可以通过外网链接打开面板了
如果还是打不开,下面是有个高级按钮,点击下面确认安全按钮即可进入
在这里插入图片描述
如果有下面的推荐,可以装一下,我也装了,随意,我是为了后期部署后端方便
在这里插入图片描述
这是我的全部安装
在这里插入图片描述

3.打包vue项目

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

在这里插入图片描述
注意把这两个文件夹的权限改成777
在这里插入图片描述
复制进来之后的样子(这里的权限,随意,暂时没发现什么要求)

在这里插入图片描述

创建站点

部署前端,选择php就行,具体原因不解释了
在这里插入图片描述
点击提交
在这里插入图片描述
创建成功如下
在这里插入图片描述
要求是yxx文件夹下,必须有index.html目录,咱们复制的是整个dist,所以需要配置一下,
点击下图的设置–点击网站目录,先确认一下项目目录对不对,
重要的是配置运行目录
在这里插入图片描述

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

默认80等是放开的,不修改的话项目使用的是80端口
在这里插入图片描述
这样项目就配置好了,接下来运行

运行项目

如果刚开始,你不知道如何运行项目,如下图
点击网站中的,网站名,再点击域名即可运行了
在这里插入图片描述
运行成功自己的项目,记住网址即可
在这里插入图片描述
以上就是全部过程了,如有问题或者需要帮助可在评论区告知!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/812665.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Tomcat 安装配置教程及成功后,启动失败报错解决方案

解决方案 我的报错原因是因为我的JDK是1.8的而我的Tomcat是10版本的,可能是因为版本原因吧,我重新装了Tomcat 9就可以启动成功了! 简单说下安装的时候需要注意哪些步骤吧 今天我在安装tomcat10的时候,安装成功后,启…

Houdini查看参数能用的内置变量($符号开头的变量)

在某个参数上,右键,reference, local variable就能看到

什么是生成式人工智能及其工作原理?

什么是生成式人工智能? 生成式人工智能是一个令人兴奋的领域,它有可能彻底改变我们创建和消费内容的方式。它可以产生新的艺术、音乐,甚至是以前从未存在过的逼真的人脸。生成式人工智能最有前途的方面之一是它能够为各个行业创建独特的定制…

【雕爷学编程】MicroPython动手做(18)——掌控板之声光传感器3

知识点:什么是掌控板? 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片,支持WiFi和蓝牙双模通信,可作为物联网节点,实现物联网应用。同时掌控板上集成了OLED…

Git初始化

查看git版本 git --version 设置Git的配置变量 方法: 修改全局文件(用户主目录下.gitconfig)修改系统文件(如/etc/gitconfig) 用户姓名和邮件地址 修改用户名和邮件地址 git config --global user.name "用…

【雕爷学编程】MicroPython动手做(17)——掌控板之触摸引脚2

知识点:什么是掌控板? 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片,支持WiFi和蓝牙双模通信,可作为物联网节点,实现物联网应用。同时掌控板上集成了OLED…

《cuda c编程权威指南》02 - 内存管理和线程管理

一个典型的CUDA编程结构包括5个主要步骤。 分配GPU内存。从CPU内存中拷贝数据到GPU内存。调用CUDA内核函数来完成程序指定的运算。将数据从GPU拷回CPU内存。释放GPU内存空间。 这里先理一理如何分配gpu内存。 目录 1. 内存管理函数 1.1 分别内存 1.2 数据拷贝 2. gpu内存…

从互联网到云时代,Apache RocketMQ 是如何演进的?

作者:隆基 2022 年,RocketMQ 5.0 的正式版发布。相对于 4.0 版本而言,架构走向云原生化,并且覆盖了更多业务场景。 消息队列演进史 操作系统、数据库、中间件是基础软件的三驾马车,而消息队列属于最经典的中间件之一…

面试最常被问到的接口自动化测试面试题汇总

一、请问你是如何做接口测试的? 大体来说,经历以下过程:接口需求调研、接口测试工具选择、接口测试用例编写、接口测试执行、接口测试回归、接口测试自动化持续集成。具体来说,接口测试流程分成以下九步: 第一步&…

Android架构技术大纲(记录)

关于作者:CSDN内容合伙人、技术专家, 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 ,擅长java后端、移动开发、人工智能等,希望大家多多支持。 目录 一、导读二、概览三、目录3.0 设计模式3.1 数据结构与算法3.2 Java…

[每日习题] 完全数计算 扑克牌大小 ——牛客习题

hello,大家好,这里是bang___bang_,今天也还是记录2道牛客习题,1道简单题(完全数计算);1道中等题(扑克牌大小)。 目录 1️⃣完全数计算 2️⃣扑克牌大小 1️⃣完全数计算…

Cpp05 — 内存管理

内存管理 代码是以文件的形式存储在磁盘上的。 不是说是代码就会加载到代码段,而是代码编译好的二进制指令代码会加载到代码段,然后程序中main函数执行时就是在代码段取指令来执行。栈和堆上的数据是运行时才建立的。 常量区是有硬件保护的&#xff0c…

【JAVA】java中的逻辑控制

作者主页:paper jie的博客 本文作者:大家好,我是paper jie,感谢你阅读本文,欢迎一建三连哦。 本文录入于《JAVASE语法系列》专栏,本专栏是针对于大学生,编程小白精心打造的。笔者用重金(时间和精…

Android应用开发(22)获取Property系统属性

Android应用开发学习笔记——目录索引 开发过程中我们经常需要获取Property系统属性&#xff0c;比如model、device、product 等等&#xff0c;通常debug的时候可以使用如下命令获取。 adb shell getprop <property name> adb shell setprop <property name> <…

Unity 四元素

//-------------旋转------------ // //设置角度 (超过90或负数时&#xff0c;会设置-1结果是359这样的问题&#xff0c;可以使用下面旋转的方式) transform.rotate new Quaternion(0,0,0,0);//Quaternion四元数 transform.localEulerAngles new Vector3(0,0,0);//EulerA…

idea集成jrebel实现热部署

文章目录 idea集成jrebel实现热部署下载jrebel 插件包下载jrebel mybatisplus extensition 插件包基础配置信息情况一其次情况三情况四情况五情况六情况七 验证生效与否 Jrebel热部署不生效的解决办法 idea集成jrebel实现热部署 在平常开发项目中&#xff0c;我们通常是修改完…

Android应用开发(23)获取亮灭屏状态

Android应用开发学习笔记——目录索引 在android 应用程序获取亮灭屏状态的常用方法有&#xff1a; 使用PowerManager提供的API函数注册Broadcast监听 一、使用PowerManager提供的API函数 frameworks/base/core/java/android/os/PowerManager.java import android.os.Buil…

Java 模块化Modularity- 了解与测试

1. java9后JDK后目录的变化 不见了jre,新增了jmods目录。 1&#xff09;为什么不见了jre&#xff1f; 新版JDK提供了 jlink工具&#xff0c;使用它构建一个包含jre镜像的应用程序。 就是可以打包一个引用程序内部已经包含完整或部分jre&#xff0c;可以直接运行。 2&#xf…

2023 7-30

题目1 lee2331.计算布尔二叉树的值 对于一棵完整的二叉树(每一个根节点孩子的个数不是0就是2) 叶子节点是1或者是0,其中1代表true,0代表false非叶子节点的值是2或者3,其中2代表逻辑或or,3代表逻辑与and计算方式 如果节点是个叶子节点,那么节点的 值 为它本身,即 True 或者…

1400*D. Pair of Topics

Examples input 5 4 8 2 6 2 4 5 4 1 3 output 7 input 4 1 3 2 4 1 3 2 4 output 0 题意&#xff1a; 选择两列&#xff0c;使得上面两个值的和比下面两个值之和大。 解析&#xff1a; 令c[ i ] a[ i ] - b[ i ]&#xff0c;转换成选两个值&#xff0c;其和大于0 排…