Vue项目自动部署之一、阿里云Linux服务器、域名购买和使用

最新推荐文章于 2023-07-25 02:03:28 发布
最新推荐文章于 2023-07-25 02:03:28 发布
阅读量602 收藏
点赞数
分类专栏： 部署
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012961419/article/details/109387317
版权

购买阿里云Linux服务器

如果已有服务器请直接跳转到【传统部署方式】

登录阿里云，访问 云服务器 ECS 购买地址：https://ecs-buy.aliyun.com/

也可从首页导航菜单进入。

购买方式

  • 一键购买 - 整合了一些常规配置选项，选择后直接确认订单。
    • 一键购买提供的实例规格（服务器配置）都是【突发性能实例 t5】
  • 自定义购买 - 按步骤完全自定义选择配置（推荐）
    • 有更多的实例规格选择

当前购买的配置，在后期都可以通过升级调整，优惠按照当时的活动。

比如今天选好了配置并购买，第二天升级，优惠保持不变（客服说的，大致意思是这个，最好再和客服确认清楚）

本人的购买原则是【便宜】，下面是具体介绍。

下面是自定义购买的一些介绍，没讲到的就是默认选择了。

付费模式

在这里插入图片描述

客服和我说，如果不经常使用，可以选择【按量付费】。

我的考虑是：

  • 本人懒得管理，所以不会主动去操作停机
  • 依然是因为懒得管理，万一里面不小心放了个消耗流量应用，或存在被外部持续访问的各种可能性，本人又不是很懂，担心这种风险导致流量超额
  • 包年包月有优惠

所以我这样的懒人就选择了【包年包月】

地域及可用区

在这里插入图片描述

刚进来默认选择的是【南京】，还有其他选择。

客服的说法是：访问服务器的IP地域 距离 服务器地域 越近，访问速度越快。

推荐购买离你所属地区近的地域。

另一个考虑：【张家口】和【呼和浩特】本人购买时有优惠（该优惠主要是 t5 相对便宜些，其他的没变化）。

所以本人买的最便宜的【张家口】（t5 17.1元/月）

实例

由于本人只是个人学习用，彼时只是发布一个站点，没有任何数据交互，所以选择了1核1GB。并且选择了最便宜的 t5 实例。

本着不够用的话后期再升级的目的，选择了最便宜的实例。

实例规格 - 突发性能实例 t5：

在这里插入图片描述

在【自定义购买】页面可以查看明细对比。

【突发性能实例 t5（后面简称 t5）】相对便宜很多。

它的 “平均基准CPU计算能力” 特意标识了 20%。

大致意思就是当服务器CPU占用超过20%后，会很卡。

其他的实例就是当CPU占用达到100%后才会很卡。

这是阿里云发现很多用户的ECS并没有经常被使用，而提供出的一种优惠选择。

更详细的介绍可以百度，有很多文章讲的很细。

本人之前有一次购买经验，仅供参考：

当时搭建了一个自用的后台系统。

购买的配置是1核1GB（还是标准型的），mysql数据库，20GB数据盘，1M带宽。

使用时访问很慢，于是升级为1核2GB，并升级了带宽（1M 升级为 4M），之后访问正常。

原因没搞懂，因为懒。。。

镜像

因为学习Linux系统，所以镜像选择了 Ubuntu 最新版本。

主要原因：社区庞大。

参考文章：CentOS和Ubuntu有什么区别，哪个更好？

远程连接 Ubuntu 后的界面：

在这里插入图片描述

存储

使用了默认的配置，这次没有购买数据盘。后期需要再升级。

在这里插入图片描述

网络和安全组

下一步进入【网络和安全组】，根据个人需要配置，本人看不懂所以基本上都是默认选择。

  • 带宽计费模式：同收费模式一样，本人选择了【按固定带宽】收费
  • 带宽值：网友都是1M就够了，这次就选择了1M，不够再升级

参考文章：

系统配置

下一步进入【系统配置】。

在这里插入图片描述

登录凭证：

  • 密钥对，需要创建密钥
    • 官方文档
    • 注意：如果使用SSH密钥对登录Linux实例，将会禁用密码登录
  • 自定义密码
    • 可以用ssh连接服务器时通过输入密码登录
  • 创建后设置 - 不设置 密钥对/密码 默认选择了这项
    • 创建实例（购买后），如需登录，需要重置密码（设置密码），或创建密钥对。

购买时长

购买时长是一直保持在底部的，可以即时计算价格。

根据本人计算，时间越久，优惠越大，建议购买长点的，因为续费很贵！！！！！！

（官方有续费优惠活动，但是力度不大。也可选择到期重新买，只是需要手动转移数据等事情）。

连接测试

购买成功后，通过网站右上角进入控制台：

在这里插入图片描述

查看云服务器ECS -> 查看实例 -> 实例详情 ->重置密码：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

重置密码后需要重启实例。

使用win10系统的内置应用 openSSH 连接远程服务器，如果没有安装，需要手动安装一下：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

安装后打开命令行工具或 Powershell：

# Linux 默认登录名 root
# ip 输入实例的公网IP（在实例详情中可以找到，也可以是绑定的域名）
ssh [登录名]@[ip]
# 执行命令后会要求输入密码（密码不会显示在命令行中，输完直接回车即可）

连接成功：

在这里插入图片描述

代理服务器

购买服务器可以选择【香港】的服务器。

  • 香港域名不需要备案，比较方便
  • 香港的服务器可以访问国外的网站，可以作为代理服务器

chrome 可以安装插件 proxy switchyomega 配置代理服务器，管理哪些请求由代理服务器访问：

在这里插入图片描述

在 GFWeb 配置代理服务器的IP和端口。

在自动切换中（可以通过导入PAC）配置由代理服务器访问的域名。

SSH免密登录

可参考阮一峰老师的 SSH原理与运用（一）：远程登录

  1. 生成密钥对
# 在客户端（本机）打开命令行工具
# 进入要存放密钥对的目录，一般是当前用户的 .ssh 目录下
# 例如 Administrator
cd C:\Users\Administrator\.ssh

# 生成密钥对
ssh-keygen
# 自定义密钥对的名称，方便区分
Enter file in which to save the key (C:\Users\issuser/.ssh/id_rsa):aliyun_rsa
# 其他询问可直接跳过

运行完后会生成两个文件：

  • aliyun_rsa 私钥
  • aliyun_rsa.pub 公钥
  1. 上传公钥
# 接着把公钥拷贝到服务器
# 命令行的 scp 命令可以把文件上传到远程服务器
# 还可以把远程服务器上的资源下载到本地
# 注意：使用 scp 的时候路径中不能有中文，否则会操作失败
scp aliyun_rsa.pub [登录名]@[ip]:/[登录名]/.ssh
# 例如 scp aliyun_rsa.pub root@99.99.99.99:/root/.ssh
  1. 将公钥追加到授权文件中

.ssh 目录下有个 authorized_keys 文件，.ssh是隐藏文件，查看的话需使用 ls -a。

authorized_keys文件里存放一些公钥，将生成的公钥追加到文件中，就可以实现免密远程登录了。

# 首先通过密码登录远程服务器
ssh [登录名]@[ip]

# 进入 .ssh 目录
cd ~/.ssh

# 将公钥内容追加到 authorized_keys 文件中
cat >> authorized_keys < aliyun_rsa.pub

# 重启服务器上的 ssh 服务
systemctl restart sshd
  1. 修改客户端（本机）的 .ssh/config 文件

.ssh/config 文件默认可能没有，需要手动创建，用于设置ssh登录服务器时携带的私钥及其他信息。

可以记录多个服务器登录配置。

Host [ip]
HostName [主机名]
User [登录名]
PreferredAuthentications publickey
IdentityFile [私钥地址]

例如：

Host 99.99.99.99
HostName aliyun_server
User root
PreferredAuthentications publickey
IdentityFile C:\Users\Administrator\.ssh\aliyun_rsa

# 重新打开命令行工具，使用ssh登录服务器，即可直接登录
ssh [登录名]@[ip]

Linux常用命令

  • cd 切换目录
  • ls 查看当前目录下文件
  • ls -a 查看所有文件（包含.开头的隐藏目录）
  • pwd 查看当前所在文件夹
  • df 查看磁盘占用
  • apt install <appname> 安装软件
  • apt remove <appname> 写在软件
  • rm <filename> -i 彻底删除文件（会询问）
  • clear 清空命令行
  • exit 退出连接
  • whereis <appname> 查看软件安装路径
  • env 显示环境变量
  • echo $PATH 打印path路径变量
  • cat <filepath> 查看文件全部内容
  • rm -rf * 强制（-rf）删除当前目录下所有文件

软件安装

新安装的ubuntu系统的 /etc/apt/source.list 中的源比较旧了，需要更新一下，更新方法：apt -y update

否则安装软件会失败，例如安装 unzip

Reading package lists... Done
Building dependency tree
Reading state information... Done
Package unzip is not available, but is referred to by another package.
This may mean that the package is missing, has been obsoleted, or
is only available from another source

E: Package 'unzip' has no installation candidate

unzip安装

如果服务器未安装unzip，使用unzip命令失败会提示安装unzip：

apt install unzip

nvm - node版本管理工具

node多版本管理工具主流有：nvm 和 n。

具体选择可以百度，搜索“管理 node 版本，选择 nvm 还是 n？”。

这里使用 nvm官方安装教程

  1. 下载 nvm 安装脚本 并 运行
# 下载install脚本，并使用bash执行
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
# or
# wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
  1. linux下安装完后执行 nvm -v 如果报找不到该命令

官方：关闭终端，重新打开，再次执行。

  1. 接着就可以安装node了
nvm install node
# or
# nvm install 12.17.0
# 查看node版本列表
nvm list
# 指定node版本
nvm use 12.17.0
  1. nvm 会自动将 node 添加到环境变量
# 打印环境变量
echo $PATH

端口添加访问权限

例如使用NuxtJS开发的项目默认使用3000端口，阿里云服务器默认没有为这个端口添加访问权限，需要手动添加：

进入控制台-安全组，点击进入安全组规则：

在这里插入图片描述

手动添加规则：

在这里插入图片描述

域名

购买注册

在阿里云左侧菜单或其他入口进入【域名控制台】。

在这里插入图片描述

进入【域名注册】页面

在这里插入图片描述

首先搜索自己想要注册的域名，加入清单购买，购买需要实名认证。

在这里插入图片描述

实名认证

购买成功后会在【域名控制台】显示。

域名还需要进行实名认证，否则不能使用。

在这里插入图片描述

实名认证完成后，可能可以临时正常使用一下，但也有可能因为没有备案又被禁止使用。

解析

点击操作栏的【解析】，解析域名到IP。

在这里插入图片描述

点击【添加记录】。

在这里插入图片描述

  • 【记录类型】：A- 将域名指向一个 IPV4 地址
    • CNAME：可以将域名指向 GitHub 或其他平台的域名
    • TXT：配置 HTTPS 所需，此类型的【记录值】是申请证书的时候获取的
  • 【主机记录】：根据说明配置一级/二级域名
  • 【记录值】：服务器IP地址
  • 其他选项采用默认值即可

解析配置完成后需要等待一会后才会解析完成，可使用命令行工具 ping 命令测试是否解析完成。

ping xxx.com

域名解析后，通过 ssh 或 浏览器 访问服务器可以使用域名代替 IP。

如果没有备案，可能会暂时无法访问

在这里插入图片描述

备案

点击页面链接或从控制台菜单进入备案页面。

在这里插入图片描述

域名备案前需要实名认证，阿里云域名实名认证成功后，还需要等待信息同步（3天左右），如果未同步，备案时会提示：

在这里插入图片描述

皮蛋很白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
如何把前端vue项目部署到阿里云服务器上访问？
yundashi168的博客
08-14 1505
前提条件： 一台云服务器：阿里云服务器 或 腾讯云服务器 一个域名：阿里云域名 或 腾讯云域名 如果你不用域名也可以，那就用公网ip地址访问，不过不知道百度seo搜索和收录。商业的项目一般都用域名绑定ip之后，用域名访问项目。服务器是必备的，原则：用哪家服务器，就选哪家域名。 在前面的文章里面，自己做了一个练手的小项目，买了服务器
vue 获取动态域名_vue项目中运用webpack动态配置打包多种环境域名
weixin_39541044的博客
12-22 554
在如今前后端分离，各种框架盛行的前端界，对项目的打包要求也越来越复杂，本人分享一个vue项目里，根据命令行输入不同的命令，打包出不同环境域名的方法。(欢迎纠错，谢谢。)1. 安装插件cross-env，npminstallcross-env --save -dev，用于配置命令行输入命令。2.修改package.json里的script命令：配置了test(测试)，ready(预发布)，p...
node+react+vue项目-指定域名-部署阿里云(全程记录)
goutinga的博客
04-21 829
今天阿里云来了条短信，说学生机快到期了，要尽快续费。我的所有个人项目都在上面(包括即将要答辩的毕业设计)，赶紧去续费，没想到没有学生优惠了，阿里云 “云翼计划” 取消了，恢复原价了，145块钱一个月，直接裂开。。。 重新搞一个学生机，顺便记录下 阿里老云翼活动 地域离你近点比远点好，镜像选系统镜像(linux) CentOS7.3，这是我的老配置，直接买一年的。 新服务器IP：47.95.234.230 老服务器IP：123.57.5.134 对老服务器有感情了，纪念一下。 重置服务器密码 本地看一看
把买了域名的网站部署到服务器上，ubuntu实现root用户登录
北枫林
12-27 466
1.安装XShell和Xftp。 2.安装nginx。Ubuntu服务器的话，直接apt-get install nginx 3.域名解析。需要在你购买域名的地方找到解析域名，注意需要实名认证。 4.修改配置。 url访问的默认路径是安装的路径html文件夹下的内容，如果需要指定自定义的路径，需要配置nginx.conf文件内容 在Xftp里nginx.conf头部： user root; 在Xftp里/etc/nginx/sites-available/default，用记事本打开，有一.
vue项目打包发布到服务器
hellojoy的博客
04-10 1757
1，tomcat： tomcat下部署静态文件。一般情况下，网站也做到静态文件的分离。静态文件这个时候就需要部署到特定的服务器上了。一般会部署到nginx上。如果做测试的话，也会部署到tomcat上。 部署的方法为： 在tomcat的conf目录下的server.xml文件中做相应的配置即可。 1.在<host></host>中添加配置。 <Context ...
前后端分离 -- SpringBoot + Vue实战项目 部署至阿里云服务器
04-18
本项目用于部署至Linux服务器案例项目 该项目技术栈为：SpringBoot + Spring Security + Vue + ElementUI 前后端分离实现整体项目 一个简单的前后端分离项目
Vue项目部署的实现（阿里云+Nginx代理+PM2）
12-12
最近部署一个Vue项目到阿里云ECS上，因为项目涉及一些跨域请求，所以采用了Nginx代理请求本地的node服务（利用pm2做进程管理）。node服务借助axios设置headers的referer、host转发请求，解决跨域请求问题。 先交代下...
VUE项目发布和部署 (阿里云)
01-07
以下是我看全栈之巅整理的，有兴趣可以看一下 这是我写好的项目（后台管理：admin，前台展示：web，服务端：server） 1. 生产环境编译 1.修改axios的baseURL const http = axios.create({ // baseURL: ...
SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解
09-14
本教程将详细讲解如何将一个使用SpringBoot作为后端、Vue.js作为前端的项目部署到Linux服务器上。我们将探讨Vue项目的打包、Express作为静态文件服务器以及SpringBoot项目的部署。 **Vue 项目打包与部署** 1. **...
2019 vue2.x最新视频从基础语法-进阶使用-源码解析-项目实战
04-03
2019 vue2.x最新视频从基础语法-进阶使用-源码解析-项目实战 让你玩转vue2.x
阿里云服务器10分钟快速部署vue项目
dccose的博客
09-13 2513
阿里云服务器10分钟快速部署vue项目 腾讯云服务器10分钟快速部署vue项目
在云服务器部署Vue项目并为其设置一个很酷的专属域名 [多图文，流量预警]
最新发布
liuyi6119的博客
07-25 160
多图文，保姆级教程手把手教你在云服务器部署Vue项目并为其设置一个很酷的专属域名
vue 项目打包后可以改为动态配置域名地址
风花一世月
06-01 1072
在静态目录建立config.js文件存放动态域名 let baseUrl = 'http://192.168.21.122:8201/' let baseFileUrl = 'http://192.168.10.331:31703/' // let baseUrl = 'https://www.baidu.com/' // let baseFileUrl = 'https://www.al...
vue项目打包后部署到服务器(超详细步骤)
热门推荐
weixin_49577940的博客
06-24 8万+
耽误了几天, 终于开始写第二篇博客了, 这篇会讲怎么将vue项目打包部署到服务器, 其实和上一篇的uni-app步骤一样的, 就是最后多了一步修改nginx配置, 好 , 上操作 一 ,打包项目 1 , vscode打开你的vue项目 -- > 点终端- > 新终端- >输入npm run build 按回车 , 显示正在打包..稍等一会 2 , 打包成功 , 生成了dist文件夹, 打包好的文件存放在里面 二 , 用一个工具, 把打包好的文件上传到你的服务..
Vue项目使用自定义域名访问本地
Wangdr的博客
11-10 2088
disableHostCheck: true，是解决浏览器打开www.local.com出现Invalid Host header页面的情况。1、配置本地hosts文件：添加127.0.0.1 www.local.com（自定义域名）
经常忘记网址？将Vue项目一键打包为桌面客户端 十分钟让你解决烦恼
Designer 小郑的技术博客
12-06 4241
本文讲解了如何将一个Vue项目打包为桌面客户端，实现像Excel一样双击运行，适用于管理较多项目且经常忘记网址的场景。本文还讲解了 Vue 项目从下载依赖、打包和Nginx部署的全过程，可以给开发者参考学习。
vue项目使用域名部署（一个域名多个项目）
白鸽
04-11 3080
vue去掉访问路径中的#号 在router -> index.js中添加 export default new Router({ base: "/xi-music/", //项目名称 访问路由页面都需要加上这个,访问的根路径为http://ip:port/webSite mode: "history", //消去# routes: [ ] }) vue项目打包 build模块中将/ 改为 assetsPublicPath: ‘/xi-music/’,该名称可以任..
Web项目（Vue）部署到阿里云服务器【超详细】
weixin_43690623的博客
01-28 2万+
超详细Vue项目部署篇 小白的部署之路 前段时间白嫖了一年的阿里云服务器，想着手上有个项目，那就顺便部署上去吧，然后就进行了为时一天的踩坑之路。将大象放进冰箱有几个步骤？打开冰箱，将大象防进去，关上冰箱。巧了，项目部署呢，也刚刚好是三步：打包项目–>配置服务器环境–>将项目放到环境中。让我们开始吧！ 一、打包Vue项目 先将项目 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片拖拽 功能，你可
【转载】vue项目部署到阿里云上详解
StudyWinter的博客
11-12 1680
首先，买一台云服务器是必要的，我使用的是阿里云服务器CentOS 7.4 64位操作系统。 在整个vue-cli项目上线过程中，我遇到了很多问题。不过，最终圆满解决了，因此在这里记录一下。 遇到的问题： 云服务器连接 vue项目打包上线 nginx安装配置 本地json数据无法访问 vue路由页面无法访问 一、使用Xshell连接云服务器 1、百度下载一个Xshell+Xftp6并安装。 2、打开Xshell,建立与远程服务器的连接注意：上图的主机就是阿里云上创建的实例的阿里云的ip 3、配置
vue项目部署到阿里云服务器上 使用linux
05-14
部署 Vue 项目到阿里云服务器可以分为以下几个步骤： 1. 安装 Node.js 和 npm 在 Linux 系统上安装 Node.js 和 npm 可以使用包管理器来安装，例如在 Ubuntu 系统上可以使用以下命令来安装： ``` sudo apt-get update sudo apt-get install nodejs sudo apt-get install npm ``` 2. 安装 Vue CLI 使用 npm 安装 Vue CLI： ``` npm install -g @vue/cli ``` 3. 构建 Vue 项目 在项目根目录下执行以下命令构建项目： ``` npm run build ``` 将会在项目根目录下生成一个 `dist` 目录，里面包含了构建好的静态文件。 4. 配置 Nginx 安装 Nginx： ``` sudo apt-get install nginx ``` 创建一个新的 Nginx 配置文件 `/etc/nginx/sites-available/vue-app`，内容如下： ``` server { listen 80; server_name yourdomain.com; root /var/www/vue-app/dist; index index.html; location / { try_files $uri $uri/ /index.html; } } ``` 将 `yourdomain.com` 替换为你的域名或者 IP 地址。 启用刚创建的 Nginx 配置文件： ``` sudo ln -s /etc/nginx/sites-available/vue-app /etc/nginx/sites-enabled/ ``` 重启 Nginx： ``` sudo service nginx restart ``` 现在你可以通过浏览器访问你的 Vue 应用了。 注意：如果你的服务器开启了防火墙，需要打开 80 端口或者使用 HTTPS 协议来访问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值