在linux服务器上安装xshell、xftp、nginx，部署前端打包的dist项目

最新推荐文章于 2024-08-14 22:39:38 发布
最新推荐文章于 2024-08-14 22:39:38 发布
阅读量3.3k 收藏 18
点赞数 3
分类专栏： angular vue 前端 服务器 环境
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/come0across/article/details/97276881
版权
本文介绍了如何在Linux服务器上安装xshell和xftp，详细步骤包括下载安装软件、使用xshell登录服务器、配置环境。接着讲解了nginx的下载与安装，以及启动nginx的过程。最后，文章详述了前端项目的部署，包括将dist文件放入指定目录、修改nginx配置和重启服务，使得项目可以通过服务器地址访问。
摘要由CSDN通过智能技术生成

1.下载、安装xshell，xftp

https://www.netsarang.com/zh/xshell/
在这里插入图片描述
如果是自己用可已使用免费版的
在这里插入图片描述
在这里插入图片描述
填完之后在邮箱打开下载链接下载并安装

2.登录xshell

在这里插入图片描述
填写主机名之后点击“确定”
在这里插入图片描述
点击会话列表选项，点‘连接’
在这里插入图片描述
linux服务器一般用户名填写root，填写完成之后点‘确定’
在这里插入图片描述
填写密码，点‘确定’，登录xshell成功

3.登录Xftp

在这里插入图片描述
想直接连接就点击‘连接’按钮

3.环境配置

用xshell连接服务器，进入/usr/local目录执行以下操作

//安装gcc
apt-get install build-essential
apt-get install libtool

//安装Pcre
wget ftp://ftp.csx.cam.ac.uk/pub
最低0.47元/天 解锁文章
盼盼盼
关注
专栏目录
Vue开发实战三：Vue编译包Linux及Window服务器Nginx部署
博主逸尘
12-11 2664
文章目录1.打包Vue项目2.拿到编译文件dist文件夹，扔到服务器上3.下载Nginx并扔到服务器4.解压Nginx及配置5.Nginx初始化6.编译7.运行Nginx8.查看Nginx是否启动9.在浏览器访问下IP+端口号 项目背景说明： 最近一直在修改Vue前端的项目，今天接到领导要求，让我在内网139搭建一套数据安全服务支撑平台的前端系统，心里顿时翻了个360°白眼，大哥我是干Android开发的啊，Linux、Nginx没整过啊，之前封闭开发不是你部署的吗，好吧，既然领导说了，那也只能干了。 1.
Vue项目从 打包优化 到 上线部署 云服务器的全过程（**教你在云服务器上优化部署自己的项目**）
weixin_45745641的博客
02-03 2762
前言 作为前端开发人员，我们不仅要会写代码，优化打包，上线部署也是一个前端工程师必备的技能，这篇文章就教大家从零开始，把一个完整项目打包发布到线上服务器。首先的准备工作就是需要一台云服务器。 项目打包优化 项目的打包 对于项目打包，直接在项目目录输入指令 npm run build 就可以看见项目目录生成了一个名为dist的文件，就是是打包后的文件，将这个文件进行部署就可以 项目的优化 我们可以利用vue项目管理器查看我们项目可以优化的地方 在cmd中输入vue ui打开项目管理器，打开我们需要打包的项目
使用Xshell将前端项目部署到服务器
weixin_45484574的博客
09-03 5216
引言 以前项目用到过Xshell把项目部署到服务器，当时是后端已经配置好了，我只需把项目打包发布 步骤 step1 启动Xshell后，点击如下新建 step2 把名称、主机、端口号填好 step3 在如下图 连接—>用户身份验证 处填写用户名和密码,便连接成功 step4 连接成功后，进入如下页面 输入命令 ls ，列出目录内容 ~输入命令 cd usr/local/nginx/vue（路径是需要部署到的位置）到需要部署的目录下就可以开始上传了 vue输入命令 rm -rf dist
阿里云+Xshell部署前端项目，从准备工作到部署成功，亲测详解，小白友好型
Zrf2191318455的博客
05-19 1523
使用阿里云服务器+Xshell+Xftp实现将html页面或打包后的项目部署到服务器上，实现可以在不同电脑的浏览器上访问该html页面或项目。注：同一种方法并不一定适合所有情况，该情况可作为一种尝试。
前端如何使用Nginx代理dist网页，代理websocket，代理后端
最新发布
Franciz777的博客
08-14 2223
本文将指导您如何配置Nginx以代理前后端分离的项目，并特别说明了对WebSocket的代理设置。通过本教程，您将能够实现一次性配置，进而使项目能够在任意局域网服务器上部署，并可通过IP地址或域名访问服务。笔者建议 先速览本文了解大致内容后再复制对应的代码。本文环境基于Windows 理论通用于linux。
通过使用XShell工具、Nginx环境实现服务器项目构建与发布
炑焽的博客
04-17 2323
在信息化和数字化的今天，网站和应用的构建与发布已成为企业发展的重要一环。为了确保项目的顺利上线和稳定运行，选择合适的工具和环境至关重要。本文将详细介绍如何通过XShell工具以及Nginx环境来实现服务器项目的构建与发布，为广大开发者提供一条高效、便捷的路径。如果想学习Ubuntu系统下载和学习资料的可以私我，如果需要的人多的话将会发布一篇关于Ubuntu系统的介绍。
xshell.xftp.nginx 部署前端项目
duanyuehuan
10-25 1413
一.安装xshell xftp. 新建会话 输入用户名密码 连接成功后安装nginx 1.环境安装 yum install gcc-c++ yum install -y pcre pcre-devel yum install -y zlib zlib-devel yum install -y openssl openssl-devel 2.安装包 wget -c https://nginx.org/download/nginx-1.12.0.tar.gz 3.解压 tar -zxvf nginx-1.12
Ubuntu上通过xshell+xftp+nginx部署简单项目
a2014528883的博客
12-01 849
Ubuntu上通过xshell+xftp+nginx部署简单项目
xshell部署项目到服务器,xshell项目部署
weixin_42308644的博客
08-05 2683
1：下载xshell，连接远程的阿里服务器2：连接成功后要部署自己的环境Ubuntu安装python 3. 7： 1：https://www.cnblogs.com/pengmn/p/12905723.html安装MysqL 2：http://www.mamicode.com/info-detail-2182600.html安装虚拟环境 3：https://blog.csdn.net/qq_416...
vue打包后整合到springboot项目、并打包成jar上传到Linux服务器运行【前后端分离开发、整体部署到Linux服务器】
weixin_47509680的博客
09-24 767
开发完前端后，执行npm run build执行打包 npm run build 默认会生成dist文件夹 里面包含了整个前端项目处理后的静态文件 进入dist文件夹 复制所有文件 进入到springboot项目中 在resources目录下新建static文件夹 将刚才从dist复制的文件粘贴到static里面 这个时候就整合到一块了 然后运行springboot项目 访问后端启动地址就能访问到项目了 最终开发完毕后上传到服务器时 先将此maven项目打包 如图所示 点..
uni-app部署H5项目vue项目到nginx
weixin_42561312的博客
05-26 7287
前言：昨天在捣鼓自己在uniapp写的H5项目部署。最后选择了阿里云+nginx，本篇介绍一下如何部署。 一、安装nginx服务 各位看官也可以参考一下菜鸟教程 Nginx 安装配置；写的比较详细，也很简单，跟着来就行了。 以下简单讲讲我的安装过程，图就不放了: 1.安装nginx的环境 yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel 2.安装 PCRE 1、下载 PCRE 安装包，下载地址： http:
xshell5+xftp5
08-12
xshell5+xftp5，解压后安装即可。注意：千万不要升级！千万不要升级！千万不要升级！
Linux一分钟部署dist
zhuangliren的博客
07-20 3117
1、首先保证服务器要有tomcat安装包 如果没有的话，访问http://tomcat.apache.org/选择版本号下载 格式要tar.gz的就可以 2、上传安装包并解压 3、运行 解压之后cd切到tomcat目录下面的bin目录 ./startup.sh 4、将dist目录下的所有文件导入到tomcat的root文件夹下,因为tomcat默认访问root文件夹下的index.html页面 ...
Linux+Docker+Nginx部署dist，dis包部署，vue容器化部署
Python_No1的博客
01-13 811
Linux+Docker+Nginx部署dist，dis包部署，vue容器化部署
xshell使用方法 + nginx配置（超详细）
前端学习笔记
10-15 1894
/ 仅显示文件名，一行展示，放不下则换行 ls // 显示目录详细信息，每行显示一个文件和其基本信息，推荐使用 ls -la // 列出当前目录下以字母 a 开头的所有文件 ls a*// 给出当前目录下以.html结尾的所有文件 ls -l *.html// 打印当前工作目录的完整路径 pwd。
Xftp-Web前端项目部署
比起未来可期，我更喜欢如约而至
10-17 667
连接服务器 找到部署文件 如果记得项目部署所在文件夹，可以跳过此步骤。 更新项目部署文件夹 完成部署 在浏览器打开网址，即可看到所部属的项目界面，完成部署。
使用nginx在linux上部署前端项目（dist文件）
qq_52481494的博客
10-18 3478
使用nginx在linux上部署前端项目（dist文件）
Linux安装nginx及部署vue项目
x-dragon8899的博客
06-29 3405
目录一、下载nginx二、用xshell连接服务器1、创建nginx目录：`mkdir nginx`2、`cd nginx`3、配置nginx安装所需的环境4、打开Xftp传入压缩包5、解压缩6、进入加压文件7、编译安装nginx8、启动nginx9、设置nginx开机启动三、部署1、打开vue项目，在控制台输入2、在xshell进入nginx/html目录，打开xftp3、把生成的dist目录下的静态资源传输到服务器4、修改配置文件5、重启nginx 一、下载nginx 官网：http://nginx.o
2024年Web前端最新前端如何将项目部署到服务器（Nginx）_前端部署到nginx，2024Web前端大厂面试经验
2401_84619185的博客
05-12 686
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
在Windows上安装Xshell和Xftp实现安全的SSH与FTP文件传输
资源摘要信息:"Xshell和Xftp是由同一公司开发的两款不同的软件，分别用于在Windows环境下远程管理服务器和进行文件传输。Xshell是一个强大的终端仿真程序，支持SSH、TELNET和RLOGIN协议，它允许用户安全地从Windows...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值