前端项目部署到服务器(xshell+xftp)

以vue3项目为例

1.将项目打包生成dist文件

2.下载安装xshell和xftp 下载地址:家庭/学校免费 - NetSarang Website

3.在xshell新建会话(需要用到服务器、用户名、密码、端口号)正确输入后连接到服务器

   连接服务器还有一种办法,直接git bash里输入命令行 ssh -p xxxx(端口号) root@(服务器名称) 即可(示例: ssh -p xxxx root@xxxxxxx )

4.然后打开xftp用于传输文件,跟3一样,输入服务器信息点击确定

5.选中刚刚新建的会话点击连接

6.连接好之后将最开始的dist文件放到服务器制定目录

相关命令补充:

ll 查看详细文件列表
ls 查看简单的文件列表
cat +文件名(tail -f)查看文件
tar -xvf datax.tar.gz (tar -zxvf xxx.rar)解压
ssh username@hostname  SSH连接
scp  用于在本地和远程服务器之间搬运文件
mkdir directory 创建一个名为directory的目录
touch filename  创建一个名为filename的空文件
rm filename或rm -r directory  删除文件或目录
cp source destination 复制文件或目录
mv source destination  移动文件或目录
more和less  逐页显示文件内容,‌支持搜索和导航
grep pattern filename 文本搜索工具,‌用于查找包含指定文本的行
chmod permissions filename  修改文件或目录的权限
chown owner:group filename  修改文件或目录的所有者
ps  ‌窥探运行中进程
nano或vi  在终端里编辑文件内容
ps -aux | grep [进程名]  ‌查找特定进程的信息。‌
pkill [进程名]  ‌结束特定进程的运行。‌
cd 进入目录
pwd 查看当前目录的绝对路径
cd nginx 发布服务器
conf 配置项目
sbin 重启项目
发布的在nginx.conf中
vi 文件名 编辑文件
i 开始编辑:wq
esc 停止编辑
:q 没有编辑直接退出编辑
:wq 编辑了再退出
:q! 强制不保存
cd .. 退回上一层
在sbin文件夹下重启项目
./sbin/nginx -s reload 重启nginx

欢迎补充,一起进步。

### 使用 XFTP7 和 XShell7 部署网页到服务器 #### 准备工作 确保已下载并安装最新版本的 XShell7 和 XFTP7,可以从官方网址获取家庭或学校免费版[^2]。 #### 打包前端项目 对于基于 Vue 的项目,在本地环境中执行构建命令来创建生产环境下的静态资源: ```bash npm run build ``` 这会生成 `dist` 文件夹,其中包含了用于部署的所有必要文件[^3]。 #### 连接至远程服务器 启动 XShell7 并建立一个新的会话以通过 SSH 协议连接目标 Linux 服务器。输入正确的主机名/IP 地址以及认证信息完成登录过程。 #### 转移文件 利用 XFTP7 实现文件上传操作: - 启动 XFTP7 客户端并与之前设置好的相同服务器建立链接; - 新建文件传输窗口,浏览找到本地计算机上的 `dist` 目录; - 将整个 `dist` 文件夹拖拽至对应的远端路径下,比如 `/var/www/html/your_project_name` 或者其他由 Web 服务指定的位置[^5]。 #### Nginx 配置调整 为了使新上传的内容能够被正确解析展示给访客,需编辑 NGINX 的配置文件 (`nginx.conf`) 来指向新的站点根目录,并重启该服务让更改生效[^4]: ```bash sudo vi /etc/nginx/nginx.conf # or specific site configuration file under sites-available/ server { listen 80; server_name yourdomain.com; location / { root /path/to/dist; # Update this line to point at the uploaded dist folder. index index.html; } } sudo systemctl restart nginx ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值