前端项目如何部署到服务器

最新推荐文章于 2025-05-08 16:25:59 发布
最新推荐文章于 2025-05-08 16:25:59 发布
阅读量2.1w 收藏 59
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 项目部署到云服务器的内容
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liulang68/article/details/108267407

在这里插入图片描述然后就是打包操作
在这里插入图片描述然后就会生成一个dist目录
打包好以后我们就可以使用Nginx进行部署了

下载了Nginx我们需要进行配置
conf下的nginx.conf
在这里插入图片描述在这里插入图片描述在顶部位置
在这里插入图片描述
进入Nginx的sbin目录将Nginx启动起来

./nginx    //进行项目的启动

在这里插入图片描述
项目的部署第二次总结:
vue项目的话我们需要npm run build把项目打包，然后会生成dist目录
在这里插入图片描述
在这里插入图片描述

同时我们还需要在配置文件里修改一些配置，因为默认是会拦截静态资源的。
在这里插入图片描述在这里插入图片描述
在nginx部署的话我们把dist目录直接拷贝上去
在这里插入图片描述然后在服务器上面安装nginx,安装好了以后进入修改Nginx的配置
在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述
启动nginx
在这里插入图片描述这里后端也是通过nginx访问实现跳转所以不存在跨域的问题

前端项目部署流程
qq_41709082的博客
10-28 3万+
前端项目部署流程 1.首先我们需要有一台服务器，这里我用的是阿里云ecs服务器。选择的服务器操作系统是linux，下面我们开始从0开始部署一个前端项目到服务器上。 步骤： 一、链接服务器 (1). 我们需要先在自己电脑链接上我们的服务器，我使用的是xshell工具。 # 通过ssh @root[ipaddress] 来链接你的服务器 #（将ipaddress替换成你服务器的公网IP地址） ssh @root[ipaddress] 二、部署一个简单的静态页面 登录成功之后，我们先来部署一个简单的html静态
使用Xshell将前端项目部署到服务器
weixin_45484574的博客
09-03 5370
引言 以前项目用到过Xshell把项目部署到服务器，当时是后端已经配置好了，我只需把项目打包发布 步骤 step1 启动Xshell后，点击如下新建 step2 把名称、主机、端口号填好 step3 在如下图 连接—>用户身份验证 处填写用户名和密码,便连接成功 step4 连接成功后，进入如下页面 输入命令 ls ，列出目录内容 ~输入命令 cd usr/local/nginx/vue（路径是需要部署到的位置）到需要部署的目录下就可以开始上传了 vue输入命令 rm -rf dist
前端项目部署到服务器
热门推荐
m0_58709757的博客
04-02 1万+
前端项目部署到线上
将前端项目部署到服务器上 —— nginx篇（一）
最新发布
wzh520520的博客
05-08 2201
前端项目部署到服务器上，没接触过，确实是蒙里懵懂！好在借助强大的AI 工具，终于是将个人写的博客框架成功部署到了阿里云服务器上！祝你们好运。。。如果存在 sites-available/enabled：将配置放在 sites-available 中，并通过符号链接启用。如果目录结构混乱：直接创建 /etc/nginx/conf.d/ 并修改主配置加载。
部署前端项目到服务器
qq_44871531的博客
07-30 2617
前端部署项目到服务器
前端将项目部署到服务器(Nginx)的完整步骤
故里的博客
04-25 5098
前端将项目部署到服务器(Nginx)的完整步骤
前端后端项目部署到云服务器
qq_66963733的博客
01-04 3892
PS：项目前后端都使用docker进行部署，未学习过的可以去过一遍再来借鉴，也可直接借鉴进行前端项目打包之前需要把前端项目中api后端接口地址更改为实际的云服务器后端接口地址：如：云服务器公网ip: 10.1.189.1 后端服务端口为8080 所以后端服务的地址就是公网ip加上端口号http://10.1.189.1:8080 --表示后端服务，不要还是写成localhost:8080的本地环境另外前端项目其他api接口或者配置中需要对接后端服务地址的都需要改成实际云服务器的ip+服务端口号打包命令：
idea自动部署前端到linux服务器
01-17
这个命令用于备份和部署前端项目。在这里，我们使用了 Shell 命令来实现备份和部署。命令的内容是： current_time=$(date "+%Y.%m.%d-%H:%M:%S"); mv /opt/mideaoa/dist /opt/mideaoa/backup/dist_$current_time; ...
关于前端项目部署到阿里云服务器
vivoom的博客
05-19 3326
关于前端项目部署到阿里云服务器1.获取项目中打包后的dist文件夹2.本地电脑连接远程阿里云服务器3.在计算机后面的输入框中，输入您的云服务器的外网IP地址，然后单击 连接4.输入您云服务器的用户名和密码即可登录5.在服务器上安装nginx，打开nginx文件，找到html文件夹并把dist文件夹下的资源放到html文件夹下。6.在conf下找到nginx.conf文件并打开。7.将nginx下的配置文件（/nginx/conf/nginx.conf）里的server节点配置改为要配置的域名8.配置改完后测
如何将前端项目打包并部署到不同服务器环境
weixin_51591826的博客
05-26 5110
如何将前端项目打包并部署到不同服务器环境
部署前端项目到云服务器上，小白教学
qq_45869683的博客
08-12 740
server_name后跟的是云服务器的外网ip地址。申请完毕后会发现这里已经有个云服务器了，大家可以看见我这里选择的是Ubuntu操作系统，最热门的Linux发行版之一。这里我拿腾讯云服务器举例，可以免费试用一个月，其他像阿里云等也有免费的云服务器也可以申请。如果github加载不出来可以点击链接，下载压缩包解压后再进行安装。如果不是Ubuntu想要更换系统的可以点击更多，再点击更换系统。进入到root后所在的目录下，上传前端打包好的文件。这样就可以在浏览器中访问Ip地址啦，我的成功啦~
前端部署到服务器上
小菜鸟的博客
04-01 4380
记录一下自己从买服务器到部署的历程 一、云服务器 云服务购买 可以在腾讯云和阿里云上面搜索云服务器,然后购买自己需要的云服务器,我买的是1核2G的 ubuntu server 公网宽带选的1M 买好后 自己试一下连接自己的服务器 在cmd里输入 windows上要ssh 没有的话需要自己安装openSSH 我在阿里云上买的服务器,刚开始没有设置实例密码,连接之前得先去实例那里设置密码才能连接 ssh 用户名@公网IP 回车 输入密码 域名购买 在域名选择那里,输入自己想要的域名,是否被注册,没有注.
前端项目部署
weixin_33978016的博客
07-18 362
之前很少接触前端项目的部署，这次为了更全面的学习就在本机上装了一个虚拟机上，在虚拟机上练习了如何把一个 react 写的 spa 项目部署到这个虚拟机的服务器上。由于 linux 也是刚接触不久，所以整个过程还是遇到了很多坑，这里记录下。 目标 我有一个用 react 写的单页面应用，然后希望部署到服务器上，通过 ip 如 192.168.1.240/config 这种路径下访问到我的应用。这个 ...
前端将项目部署到服务器(Nginx)的完整步骤（超级详细、保姆级）
scorpion_V的博客
12-06 7610
前端将项目部署到服务器(Nginx)的完整步骤！！
【前端项目部署上线】
weixin_45313093的博客
05-31 2922
本文将介绍三种前端打包项目上线的方式：本地服务器部署、nginx服务器部署、云服务器部署。
前端自动化部署项目到服务器
失眠时间的博客
05-28 1184
借助ssh这些插件链接服务器部署，具体代码如下。全局安装gupack部署。
部署前端项目
weixin_64684095的博客
07-10 934
打开 Nginx 的配置文件，通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/sites-available/default。购买服务器，选择 Linux 服务器，操作系统选择 CentOS，安装 Nginx，配置服务器指向项目的静态文件目录。| GitHub 完成部署后，会在“Pages”部分显示部署成功的链接，您可以通过该链接访问您的静态网站。| 在“Settings”（选项）选项卡中，找到“Pages”（页面）部分。| 选择要部署的分支（通常是 main 分支）。
前端部署项目到服务器
qq_38482205的博客
02-21 801
前端配置项目到服务器
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值