ECS服务器使用体验-16.4Ubuntu 系统上部署vue+node项目

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
RDS MySQL Serverless 高可用系列,价值2615元额度,1个月
简介: 简单的介绍了一下第一次使用阿里云ECS的一些经历体验和感受,以及分享一些实践过程中get到的技能和知识点.主要包括1.环境搭建2.项目远程拉取3.安装依赖4.运行项目5. nginx 配置

一、介绍

我是一名计算机科学与技术专业的大三学生。因为学习需要,我在实验室装了一台Linux系统的主机,当我想从外网访问主机时发现访问不了,在网上搜索具体原因及教程时,偶然发现一个关于阿里云学生服务器的的帖子。于是,我便抱着试试看的心态搜索阿里云服务器,在首页搜索学生并发现了这个"飞天加速计划·高校学生在家实践"活动,我就拥有了暂时的ECS服务器使用权,开始了与他的第一次邂逅。

二、第一次在ECS部署项目

动力:为了使外网能访问我的论坛项目

系统:前期Ubuntu16.4,后期Ubuntu22.04

项目:前端 VUE + Element ,后端用 Node + Express

在部署过程中。踩的坑是真不少,下面就聊聊我的实力踩坑之旅吧!本节会当教程来讲哦!

1. 环境搭建

  • Node、npm


#使用apt安装node和npmsudo apt install nodejs 
sudo apt install npmnode-v#检查到版本号即安装成功npm-v
  • Nginx
    nginx 是一个很好的反向负载代理,很适合新手小白拿来练手

sudo apt-get install nginx  #安装命令

注:npm 是类似 apt 的包管理工具,关于 Vue 和 Express 等框架或依赖可通过 npm 安装

  • Mysql
    第一个坑他来了!他真的来了!!
    本地主机向云端导入 sql 脚本时被指编码问题。小白三连问???
    查阅资料后得知原来是 Mysql@5.7 数据脚本编码与 8.0 的编码不同致无法读取。而 Ubuntu16.4 apt 默认安装的正是 Mysql@5.7,不禁联想 apt 库为啥就不更新下仓库呢?
    于是,漫长的 5.7 -> 8.0 的版本升级之路开始了。但是,从官网下载最新版本而又发现与本系统即Ubuntu16.4 有些不友好。提示有些内容,工具用不了。
    我还不信这个邪,终于,经过几次重复折腾后,我妥协了。
    于是,Ubuntu22.04 闪亮登场,果然,升级系统真的是YYDS。补充一句,阿里云服务器不论性能还是网络,就是快,安个新系统嗖嗖一小会儿就好了。必须点赞!!!

2. 项目远程拉取

项目部署在 Gitee 远程仓库,Gitee 是 Github 的中国代理开源仓库,非常适合开源项目的协作开发。git是分布式版本管理器,功能很强大

  • git 拉取项目
#新建文件夹并初始化仓库mkdir project
git init
#绑定远程仓库地址git remote add origin git@github.com    #注意,此处的网址改为仓库地址#拉取git pull origin master

截至现在,两个项目(前、后端), 已经分别拉取到本地了,姑且假设两个项目文件夹为 pro1,pro2

3. 安装依赖

npm 安装依赖,包括 Vue 脚手架等工具、框架

#在项目根目录下执行一下命令,npm会根据配置文件安装所需npm install

4. 运行项目

此时,你已经安装完了所需要的依赖,你会发现你的项目文件中多了一个文件夹,node_moudles。这时,你就可以本地运行你的项目了,Vue脚手架版本不同,运行项目由的命令也不同,你也可以在 webpack 配置文件中修改成你想要的指令

#前端npm run serve
#后端,app.js是后端入口文件node app.js

这时你会发现,本地可以访问了,但是外网该怎么访问我们呢?我们已经有了ECS服务器,即有了公网IP了。离我们的目的也就只有一步之遥了。

5. nginx 配置

此前,我们已经全局安装了nginx

nginx 是个”代理“,所有前端项目运行之前,我们需要将自己的地址等信息告诉代理,代理才能找到我们呀!


#找到并打开 etc/nginx/nginx.config#在https{}中输入以下格式配置信息,注意此处用的是root账号server {
    listen       8080;      #本服务器对外访问的接口    server_name  localhost; #此处可以写本机公网IP或绑定的域名    location / {
        root root/dist;     #这里是项目打包文件dist的路径        index  index.html index.htm;
    }
}
#终端下输入ngingx -s reload 重新加载下nginx


注:此处也是有个坑 -- dist

dist是前端项目的打包,是其经Vue通过 npm run build 形成,里面内容是前端项目的最终显示形态。而nginx需要的正是他的路径,那你知道他应该放在哪儿吗?

默认状态下,我们都是直接进入的家目录界面,故你往往在家目录拉取了项目,并打包在了家目录,试想,代理能私自进入你的家中把他取出来吗?答案是否定的,我也验证过,确实不行。因此我们在填写其路径时需要先把他移出家目录。

你会想,解决好这些,应该就可以了吧!

NO!还有。在你在本地时,你的前端 axios 的请求配置是什么?

127.0.0.1 啊,懂了吧,换成你 ECS 地址啊!!

NO!还有,这时你可能会说:苍天啊,绕过我吧您!!细想这不失为一种成长,养成了排错能力,以及强烈的欲望。

恶龙咆哮,啊啊啊啊!!快说快说,到底是啊?

端口啊。ECS在分给你时时有安全组的,这就是你在感觉万事俱备了的时候东风为啥不来,没口子他咋进来嘞!管理平台将它打开就好了。

打开了之后,在访问,终于可以出画画了,不过这时你会发现,诶?数据咋没有呢?

分析一下,数据没有无非就以下三种因素:

1. 前端没请求过去

2. 后端没传过来

3. 数据库没连接上。

怎么办?挨个排错呗。根据Chrome控制台排除了一,根据node的前台响应数据打出错误内容排除二锁定三。搜噶,又是他!!原来是高版本数据库和本地的密码用户名绑定是不同的,修改下配置就好了,具体操作如下:

#进入数据库mysql -p# 123456为你的密码ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '123456';  
FLUSH PRIVILEGES;

终于,你的项目可以进行外网访问了,是不是很简单呢?

三、收获

使用过程中,收获颇丰。总结如下:

  • 重温了将要抛之脑后的 Linux 命令并得到增强
  • 提高了排错能力和心理抗压能力
  • 自主部署项目,提高了自主探索和学习能力
  • MarkDown语法的掌握

收获总结,展望未来!

四、个人作品展示


2a8a93a032ae036c77bc4cd50d32f32.png46ac3698690d4705e3080c9080cbc17.jpgb29d84690f83cdbc0e08acb014966b0.png

相关实践学习
2分钟自动化部署人生模拟器
本场景将带你借助云效流水线Flow实现人生模拟器小游戏的自动化部署
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情: https://www.aliyun.com/product/ecs
相关文章
|
6天前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
43 1
|
2月前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
2月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
3月前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
29 7
|
2月前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
2月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
51 4
|
3月前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
57 6
|
2月前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
3月前
|
弹性计算 Java Linux
ECS使用体验的文章
ECS使用体验的文章
|
3月前
|
弹性计算 运维 安全
阿里云ecs使用体验
整了台服务器部署项目上线

热门文章

最新文章