前端部署到服务器,使用xshell和xftp

最近在做一个项目的时候,需要搭建测试环境,所以记录一下部署过程,备忘。

前台项目用到的是nuxt2,后台管理系统用的是vue2,后端用的是egg。

因为我们的后端已经在服务器上设置Nginx了,所以我们只需要简单的上传文件既可。

下载xshell

先下载两个软件用于连接服务器和上传文件:xshell和xftp。可以在这个链接里下载(Xshell 下载 - NetSarang Website)。这里有家庭学校的免费版,直接下载免费版就可以了。

image.png

把姓名、邮箱填好,选择两者都下载,之后官方会给你的邮箱发送一个下载链接,直接打开下载即可。安装的时候一路下一步。

image.png

安装好后询问同事我们要部署到的服务器名称,用户名,密码,端口号等信息。示例信息如下:

服务器:117.78.33.254

用户名:root

密码:ecs2@corilead

端口号:2222

打开xshell,点击新建,新建一个会话。

image.png

之后会弹出一个会话框,在红框处输入名称(服务器名称),端口号。

image.png

然后点击左边的用户身份验证,填入用户名和密码,点击连接。

image.png

出现这样的提示就说明连接成功了!如果没有提示的话,在左侧点击刚刚创建的会话(117.78.33.254),右键打开属性,重新检查设置一下信息。

image.png

用xftp传输文件

打开xftp,用于传输本地文件。和之前操作类似,输入红框里的对应信息,点击确定。

image.png

选中刚刚新建的会话,点击连接。

image.png

这样就可以把本地文件传输到服务器端了。下图左侧的窗口为本地文件,右侧窗口为服务器端的文件。找到自己本地的项目,选中dist文件夹,直接拖入到右边相应的目录里就好了。

image.png

部署后台管理系统

本地操作:
1、首先将后台管理项目npm run build本地打包
2、将打包后文件中的dist文件夹打开,把dist中的index.html 移动到后端egg项目中的app文件夹下的view中
3、将后台管理项目的dist文件夹中剩下的内容移动到后端egg项目中的app文件夹下的public中
4、删除后端egg项目文件中的node_modules,并压缩后端egg项目为enmo-admin-server.zip

在xshell服务器上操作:
1、登录服务器, 找到 enmo-admin-server

本地操作:
1、将本地压缩包上传 scp Downloads/enmo-admin-server.zip xxx@117.78.33.254:/enmotech/

在xshell服务器上操作:
1、解压文件 unzip enmo-admin-server.zip
2、进入enmo-admin-server文件夹,cd enmo-admin-server
3、安装依赖包 npm i
4、启动服务 npm run stop & npm run start
5、部署成功, 删除压缩文件 $rm -rf enmo-admin-server.zip

部署前台项目

本地操作:
1、删除前台项目中的node_modules,并压缩前台nuxt项目为enmo-web.zip

服务器操作:
1、登录服务器, 找到 enmo-web

本地操作:
1、将本地压缩包上传 scp Downloads/enmo-web.zip xxx@117.78.33.254:/enmotech/

在xshell服务器上操作:
1、解压文件 unzip enmo-web.zip
2、进入enmo-web文件夹,cd enmo-web
3、安装依赖包 npm i
4、编译 npm run build
5、启动服务 npm run stop & npm run start
6、部署成功, 删除压缩文件 $rm -rf enmo-web.zip

相关命令(补充)

ll 查看详细文件列表
ls 查看简单的文件列表
cd 进入目录
pwd 查看当前目录的绝对路径
cd nginx 发布服务器
conf 配置项目
sbin 重启项目
发布的在nginx.conf中
vi 文件名 编辑文件
i 开始编辑:wq
esc 停止编辑
:q 没有编辑直接退出编辑
:wq 编辑了再退出
:q! 强制不保存
cd … 退回上一层
在sbin文件夹下重启项目
./sbin/nginx -s reload 重启nginx

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/568590.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

宜搭低代码高级认证实操题1 todolist

进行中待办 已完成待办 待办事项 待办事项远程api和变量配置 回调函数 function didFetch(content) {//console.log(content.data);// content.b 1; 修改返回数据结构中的 b 字段为1let res content.data;let todoList [];for(let i in res){todoList.push(res[i]);}consol…

本地部署大模型的几种工具(上-相关使用)

目录 前言 为什么本地部署 目前的工具 vllm 介绍 下载模型 安装vllm 运行 存在问题 chatglm.cpp 介绍 下载 安装 运行 命令行运行 webdemo运行 GPU推理 ollama 介绍 下载 运行 运行不同参数量的模型 存在问题 lmstudio 介绍 下载 使用 下载模型文件…

【Functional Affordances】机器人manipulation

文章目录 1. Robo-ABC: Affordance Generalization Beyond Categories via Semantic Correspondence for Robot Manipulation摘要和结论引言相关工作模型框架实验 2. Click to Grasp: Zero-Shot Precise Manipulation via Visual Diffusion Descriptors摘要和结论引言模型框架实…

OpenLayers基础教程——WebGLPoints图层样式的设置方法

1、前言 前一篇博客介绍了如何在OpenLayers中使用WebGLPoints加载海量数据点的方法,这篇博客就来介绍一下WebGLPoints图层的样式设置问题。 2、样式运算符 在VectorLayer图层中,我们只需要创建一个ol.style.Style对象即可,WebGLPoints则不…

【第三方登录】Google邮箱

登录谷歌邮箱开发者 https://console.developers.google.com/ 先创建项目 我们用的web应用 设置回调 核心主要: 1.创建应用 2.创建客户端ID 3.设置域名和重定向URL 4.对外公开,这样所有的gmail邮箱 都能参与测试PHP代码实现 引入第三方包 h…

软件著作权有哪些作用 好处

随着信息技术的迅猛发展,软件产业已成为全球经济增长的重要引擎。在这个背景下,软件著作权的重要性日益凸显。软件著作权,是指软件的开发者或者其他权利人依据有关著作权法律的规定,对于软件作品所享有的各项专有权利。那么&#…

【应用笔记】LAT1305+使用STM32+TT类型IO的注意事项

1. 概述 在 STM32 系列 MCU 中, 除了一些特殊管脚外,绝大多数管脚都可以分类为 FT (兼容5V 信号)或 TT(兼容 3V3 信号)类型的 IO,由于 MCU 内部设计的不同, TT IO 相比 5V IO 有更多的限制,下面…

Fiddler关闭后打不开网页

打开网络找到代理 把代理给关闭就可以了

面试算法-103-对链表进行插入排序

题目 给定单个链表的头 head ,使用 插入排序 对链表进行排序,并返回 排序后链表的头 。 插入排序 算法的步骤: 插入排序是迭代的,每次只移动一个元素,直到所有元素可以形成一个有序的输出列表。 每次迭代中,插入排序…

【 Vue 3 】Vue3.0所采用的CompositionApi与Vue2.x使用的Options Api 有什么不同?

1. 开始之前 Composition API可以说是Vue3的最大特点,那么为什么要推出Composition Api,解决了什么问题? 通常使用Vue2开发的项目,普遍会存在以下问题: 代码的可读性随着组件变大而变差每一种代码复用的方式,都存在缺点TypeScr…

什么是正向代理和反向代理?

从字面意思上看,代理就是代替处理的意思,一个对象有能力代替另一个对象处理某一件事。 代理,这个词在我们的日常生活中也不陌生,比如在购物、旅游等场景中,我们经常会委托别人代替我们完成某些任务。在技术领域&#…

工业级POE交换机的SSH配置步骤

工业级POE交换机的SSH(Secure Shell)配置可以通过以下步骤进行: 1. 连接到POE交换机:使用一个支持SSH协议的终端工具(如PuTTY)连接到POE交换机的管理接口。 2. 登录到POE交换机:输入正确的用户…