828华为云征文|云服务器Flexus X实例|Ubunt部署Vue项目

news/2024/9/25 20:09:56/

概要

本章将深入阐述Vue项目在Ubuntu环境下,实现在华为云Flexus X云服务器上的部署过程,此次演示以Vue.js项目为核心华为云在已经到来的828 B2B企业节上,为Vue等前端项目的部署与运维提供强有力的支持。

Ubuntu部署Vue项目的影响:

环境一致性:在Ubuntu系统上部署Vue项目,能够确保开发环境与生产环境的高度一致性,减少因环境差异导致的问题,提升项目稳定性和可维护性。

高效资源利用:Ubuntu以其轻量级和高效著称,结合Vue项目的轻量特性,能够最大化地利用云服务器的计算资源,降低运行成本,提升用户体验。

自动化与可扩展性:通过集成CI/CD流程(如使用Jenkins、GitLab CI等工具),Vue项目在Ubuntu上的部署可以实现高度自动化,同时,Ubuntu的灵活性和可扩展性也为Vue项目的后续扩展和升级提供了便利。

社区支持:Ubuntu拥有庞大的用户社区和丰富的文档资源,这为Vue项目的部署和运维过程中遇到的问题提供了强大的支持网络,帮助开发者快速解决问题,提升工作效率。

点击华为云官网连接:https://activity.huaweicloud.com/即可参与华为云828活动

​​

购买配置

​​

基本配置参考如下:

其他配置按需求选择即可

连接服务器

​​

远程登录界面:

​​

xshell登录界面:

根据个人ip进行登录即可

​​

构建项目

通过命令

npm run build

构建项目将会得到一个dist的文件夹 

更新本地软件包索引

​ 

安装Nginx

安装Nginx以提供高性能的Web服务和反向代理功能。 

sudoapt install nginx

检查Nginx是否运行 

sudo systemctl status nginx

设置nginx开机自启动 

sudo systemctl status nginx

 检查nginx是否设置为开机自启动

sudo systemctl is-enabled nginx

​ 项目迁移至服务器

通过服务器的传输应用------>XFTP 7即可快捷移动

注意:右侧的存放地址应位于nginx文件夹下且应删去这里原本已存在的index,html文件

​ 

修改配置文件

通过vim修改配置文件nginx.conf

sudo vim /etc/nginx/nginx.conf

为配置文件添加以下部分

注:listen 8080;#####监听端口,根据个人需求server_name ###.#.###.###; ####个人服务器ip地址location / {  #####匹配请求的URIroot /usr/share/nginx/html;--->请求的资源文件的根目录index index.html;#####当请求指向一个目录时,Nginx会尝试返回该目录下的index.html文件作为响应。try_files $uri $uri/ /index.html;#####Nginx会按顺序尝试返回请求的URI对应的文件、URI作为目录并尝试返回目录下的默认文件#####如果都失败,则返回/index.html文件
}

开放端口 

 网络安全组-->安全组规则配置

点击配置规则 

添加规则

 启动、重载并检查Nginx服务

启动Nginx服务

sudo systemctl start nginx;

 重新加载Nginx的配置文件,不中断当前连接

sudo systemctl reload nginx;

查看Nginx服务的状态

sudo systemctl status nginx;

通过网页ip+端口访问

小结

Ubuntu为Vue.js项目的部署铺设了坚实的基石。Vue.js以其轻量级的架构和作为现代前端框架的领先优势,华为更是通过其精心策划的828 B2B企业节等精彩活动,为用户带来了前所未有的优惠与便利。此刻,828 B2B企业节已盛大开启,借由华为云这一强大平台的助力,正是您优化Vue项目部署策略、加速业务创新步伐的黄金机遇。


http://www.ppmy.cn/news/1530434.html

相关文章

【C++】C++入门概念(一)

C关键字 C总计63个关键字,C语言32个关键字 ps:下面我们只是看一下C有多少关键字,不对关键字进行具体的讲解。后面我们学到以后再详细讨论。 命名空间 在C/C中,变量、函数和后面要学到的类都是大量存在的,这些变量、…

USB Micro-A、Micro-B 插头与 Micro-AB、Micro-B 插座,及其引脚定义

微型连接器配对 下表总结了每个插座所接受的插头: 从上表可知,Micro-B 插座只能配对 Micro-B 插头;而 Micro-AB 插座则可以配对 Micro-A 插头或 Micro-B 插头。 Micro-A 插头中的五个引脚的用法和接线分配在下表中进行了定义: C…

使用vite+react+ts+Ant Design开发后台管理项目(四)

前言 本文将引导开发者从零基础开始,运用vite、react、react-router、react-redux、Ant Design、less、tailwindcss、axios等前沿技术栈,构建一个高效、响应式的后台管理系统。通过详细的步骤和实践指导,文章旨在为开发者揭示如何利用这些技术…

一分钟掌握 Java13 新特性

1. 文本块(Text Blocks,预览特性) Java 13 引入了文本块,允许开发者使用多行字符串字面量,简化了多行字符串的书写,尤其在处理 JSON、XML 等格式时更为方便。 示例: public class TextBlockDemo {public static void main(String[] args) {String json = ""…

使用 Docker 部署 RStudio 的终极教程

一.介绍 在现代数据科学和统计分析领域,RStudio 是一个广受欢迎的集成开发环境(IDE),为用户提供了强大的工具来编写、调试和可视化 R 代码。然而,传统的 RStudio 安装可能面临环境配置复杂、版本兼容性等问题。Docker…

解锁高效工作的秘密武器

一、引言 ----  在快节奏的IT行业中,高效的工作方式对于开发者的成功至关重要。随着技术的发展,编程工具的种类和功能日益丰富,为开发者提供了更多的选择。那么,哪款编程工具能让你的工作效率翻倍?是智能的代码编辑器…

Delta Lake如何使用

1. 安装 Java 确保你的系统上安装了 Java 8 或更高版本。可以通过以下命令检查 Java 是否已安装: java -version2. 安装 Apache Spark 下载 Spark: 从 Apache Spark 官方网站 下载适合的版本,建议下载预编译的版本(例如&#xf…

Linux 第四章 进程通信

文章目录 一、引言二、进程的同步与互斥2.1 进程合作2.2 共享资源2.3 临界区与临界资源2.4 同步机构设计准则 三、互斥的软件方法四、硬件指令机制五、信号量机制5.1 整型信号量5.2 结构型信号量5.3 用信号量实现互斥5.4 用信号量实现同步 六、经典进程同步问题6.1 生产者—消费…