服务器使用记录(Vue项目上传到云服务器)

服务器使用记录(Vue项目上传到云服务器)

啦啦啦啦,总算折腾好了

准备的工具

1.腾讯云服务器

学生机购买就OK啦

2. WinSCP 、Xftp 6 、Xshell 6

需要下载以上工具
linux的命令行需要补起来~(flag)

3.postman

可以方便看接口的数据,方便测试

以上都准备好之后,就可以开始啦

开始

1.关于下载的东西

  • node.js
这里有两种方法
一个是wget 方式(最好新建文件夹)
 	1.wget 下载连接
 	2.tar xvf 下载的文件名
 	3.创建软链接(这里需要退到根目录)
 		ln -s ...../bin/node(具体的文件位置) /usr/bin/node
 		ln -s ...../bin/npm(具体的文件位置) /usr/bin/npm
 	4.查看node npm 版本
 		node -v 
 		npm -v	
还有一个 yum 方式(举下载JDK的例子)
   yum list java*
此次选择java-1.8.0-openjdk-devel.x86_64 : OpenJDK Development Environment
	yum install java-1.8.0-openjdk-devel.x86_64
  就可以了
  • nginx
    在这里插入图片描述
nginx 可以配置serve
可以在  /etc/nginx/default.d/ 文件下 新建 *.conf 文件 设置新的网页路由入口
  • jdk(因为要部署接口)
    下载好jdk 之后

在这里插入图片描述

但是之前要进行打包(图形的界面按一下就OK)如上图
在云服务器运行
java -jar 工程.jar

2.要解决一个跨域问题

服务器使用spring搭建的
如下添加 @crossorign 即可
在这里插入图片描述

3.粗粗略略的完成啦

在这里插入图片描述

### 部署 Vue 项目到阿里云服务器 #### 1. 打包 Vue 项目 在本地开发环境中,通过命令行工具进入 Vue 项目的根目录并执行构建命令 `npm run build`。该操作会在项目路径下生成一个名为 `dist` 的文件夹,其中包含了静态资源文件和入口 HTML 文件 `index.html`[^3]。 ```bash npm run build ``` #### 2. 购买与配置阿里云服务器 访问阿里云官网注册账号,并按照指引创建一台 ECS 实例(即虚拟机)。对于初次使用者,可以选择免费试用服务来体验一个月的时间[^2]。完成实例购买后,需设置安全组规则允许 HTTP 和 HTTPS 请求端口(默认分别为 80 和 443),以便外部能够正常访问网站内容。 #### 3. 安装必要的软件环境 登录至所购得的 Linux 系统主机之上,依次安装 Node.js、Nginx 或 Apache Tomcat 等 Web 应用容器用于承载前端页面展示功能模块。这里以 Nginx 为例说明具体实施过程: - 更新系统包管理器缓存表单数据记录; - 下载最新稳定版本发行版镜像源地址链接信息; - 启动守护进程监听指定网络接口位置参数值设定情况; ```bash sudo apt update && sudo apt upgrade -y curl -sL https://deb.nodesource.com/setup_16.x | sudo bash - sudo apt install nodejs nginx -y sudo systemctl start nginx sudo systemctl enable nginx ``` #### 4. 配置 Nginx 反向代理 编辑站点可用配置文件 `/etc/nginx/sites-available/default` ,修改其 server 块内部 location / {} 中的内容指向之前上传好的 dist 目录绝对物理存储路径位置处即可实现自动加载显示效果呈现出来给客户端浏览器设备端查看使用[^1]。 ```nginx server { listen 80; root /var/www/html/dist; # 替换为实际部署路径 index index.html; location / { try_files $uri /index.html; } } ``` 最后重启 Nginx 让更改生效: ```bash sudo nginx -t sudo systemctl restart nginx ``` #### 5. 测试访问 打开任意一款现代主流互联网浏览程序,在地址栏输入公网 IP 地址或者绑定域名名称就可以看到已经成功上线运行起来的应用界面画面啦! ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值