前端项目部署到服务器

下载xshell

官方下载地址:
https://www.xshell.com/zh/free-for-home-school/
下载左边那个
建议把右边那个一起下载安装,文件夹可视化,方便多了。
在这里插入图片描述
双击安装包安装,运行xshell。
输入用户名,邮箱(我用的qq邮箱)。
qq邮箱里点击邮件进行身份验证。

打包项目

全局安装 Vite,便于后面执行 vite build 命令进行打包。

npm install -g create-vite

在这里插入图片描述
项目里找到packa.json文件build配置,新建终端,运行里面的命令打包项目。
如果报错:
在这里插入图片描述
试试这个命令,我用这个可运行

npx vite build

在这里插入图片描述

新建链接

这里的服务器地址,用户名,密码都是组长给的,名称自己设置
在这里插入图片描述

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

开始部署

根据组长给的路径,把dist添加到新建的文件夹里

// 展示当前路径下的文件
ls 
// 打开opt文件夹
cd /opt/
cd project/
// 新建文件夹,放打包好的dist文件
mkdir hwcount

在这里插入图片描述
新建文件夹以后,点击这个,用xftp,直接把文件拖到里面
在这里插入图片描述
在这里插入图片描述
在这里打开目录

cd /usr/local/nginx
cd conf

在这里插入图片描述

在xftp里右键nginx.conf文件用记事本编辑
改端口号和名字
我还没设置跨域,所以删掉local…api的部分
保存
在这里插入图片描述

设置超时时间

    #keepalive_timeout  0;
    keepalive_timeout 1200s;
	
	proxy_connect_timeout    1200s;
	proxy_read_timeout       1200s;
	proxy_send_timeout       1200s;
	proxy_buffering    on;
	proxy_buffer_size  2m;
	proxy_buffers 200  2m;
	
	#配置客户端请求体最大值
	client_max_body_size 1024m;
	#配置请求体缓存区大小
	client_body_buffer_size 1124m;
放的位置
http {
    include       mime.types;
    default_type  application/octet-stream;
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;
    // 这里
      #gzip  on;
	
	server {
	
        listen       80;

重启

cd /usr/local/nginx/sbin
./nginx -s reload

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
部署前端项目到服务器上需要以下步骤: 1. 确定服务器环境 确定服务器的操作系统和软件环境,比如是否需要安装 Node.js 或者其他运行环境。 2. 配置服务器环境 根据服务器环境的要求,安装必要的软件和服务。比如,如果需要使用 Node.js 运行环境,需要先安装 Node.js 环境,并配置好环境变量。 3. 将项目代码上传到服务器前端项目代码上传到服务器上,可以使用 FTP 工具或者命令行工具进行上传。通常情况下,将项目代码上传到服务器的 /var/www 目录下。 4. 安装项目依赖 在服务器上进入项目根目录,使用命令行工具运行 npm install 命令,安装项目依赖包。 5. 构建项目 使用命令行工具在项目根目录下运行 npm run build 命令,构建项目代码。构建完成后,会在项目根目录下生成一个 dist 目录,里面包含了构建后的项目代码。 6. 配置 Web 服务器 根据服务器环境的要求,配置 Web 服务器。比如,如果使用 Nginx 作为 Web 服务器,需要在 Nginx 配置文件中添加一些配置项,比如监听的端口号、服务的根目录等。 7. 部署项目 将构建后的项目代码部署到 Web 服务器上。通常情况下,将 dist 目录下的所有文件复制到 Web 服务器的根目录下即可。 8. 启动 Web 服务器 启动 Web 服务器,访问服务器的 IP 地址或者域名,即可访问部署好的前端项目。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值