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

本文涉及的产品
云服务器 ECS,每月免费额度200元 3个月
云数据库 RDS MySQL Serverless,0.5-2RCU 50GB
云服务器ECS,u1 2核4GB 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

相关实践学习
一小时快速掌握 SQL 语法
本实验带您学习SQL的基础语法,快速入门SQL。
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情: https://www.aliyun.com/product/ecs
相关文章
|
27天前
|
Java Linux
Springboot 解决linux服务器下获取不到项目Resources下资源
Springboot 解决linux服务器下获取不到项目Resources下资源
|
2月前
|
Ubuntu JavaScript 关系型数据库
在阿里云Ubuntu 20.04服务器中搭建一个 Ghost 博客
在阿里云Ubuntu 20.04服务器上部署Ghost博客的步骤包括创建新用户、安装Nginx、MySQL和Node.js 18.x。首先,通过`adduser`命令创建非root用户,然后安装Nginx和MySQL。接着,设置Node.js环境,下载Nodesource GPG密钥并安装Node.js 18.x。之后,使用`npm`安装Ghost-CLI,创建Ghost安装目录并进行安装。配置过程中需提供博客URL、数据库连接信息等。最后,测试访问前台首页和后台管理页面。确保DNS设置正确,并根据提示完成Ghost博客的配置。
在阿里云Ubuntu 20.04服务器中搭建一个 Ghost 博客
|
2月前
|
Ubuntu 网络协议 Java
【Android平板编程】远程Ubuntu服务器code-server编程写代码
【Android平板编程】远程Ubuntu服务器code-server编程写代码
|
9天前
|
弹性计算 Java Linux
ECS使用体验
阿里云开发者社区里不光有着丰富的知识,还有着十分优秀的性能和非常优秀的服务!他的优点还很多,对于我来说他的优点,是可以花费很少的钱去学习,性价比高,里面的知识丰富,我很需要。 还有的就是,我使用阿里云,感觉非常省力,不需要花时间担心卡掉或死机的问题。
|
27天前
|
开发框架 JavaScript 中间件
node+express搭建服务器环境
node+express搭建服务器环境
node+express搭建服务器环境
|
20小时前
|
弹性计算 运维 安全
阿里云ecs使用体验
整了台服务器部署项目上线
|
1天前
|
弹性计算
ECS使用体验
ECS使用体验
|
2天前
|
弹性计算
阿里云ECS使用体验
在申请高校学生免费体验阿里云ECS云服务器后的一些使用体验和感受。
|
4天前
|
弹性计算 Java Linux
ECS使用体验的文章
ECS使用体验的文章
|
6天前
|
Ubuntu 网络安全 数据安全/隐私保护
使用SSH隧道将Ubuntu云服务器Jupyter Notebook端口映射到本地
这样,你就成功地将Ubuntu云服务器上的Jupyter Notebook端口映射到本地,使你能够通过本地浏览器访问并使用Jupyter Notebook。
24 1