前端项目部署到服务器

这篇具有很好参考价值的文章主要介绍了前端项目部署到服务器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.准备工具

服务器:阿里云 腾讯云 华为云都可以 我这里使用的是阿里云ECS共享型(推荐)

xshell:用于远程连接服务器,修改配置文件

xftp:用于连接远程服务器,将本地资源上传到远程服务器

2.服务器设置

1.第一次需重置实例密码

前端项目部署到服务器

2.配置安全组规则

开启常用的端口

22必须要开 80是默认访问端口也打开

前端项目部署到服务器

3.使用Xshell连接服务器

打开Xshell新建连接,名称自己起一个,主机写自己服务器的公网地址,协议不需要更改。端口选择22(默认的,所以刚刚需要开启22端口)

前端项目部署到服务器

 点击连接

输入用户名root 密码是自己设置的密码

前端项目部署到服务器

 4.使用xftp将dist文件上传到服务器

一样 新建会话 输入账号密码连接服务器

前端项目部署到服务器

 进入下面的画面,左侧是本地的,右侧就是服务器的空间,可以在服务器的root文件夹下新建文件,将dist文件拷贝过去。拷贝完成之后就可以退出xftp了前端项目部署到服务器

 4.这个时候访问主机会提示网络错误,因为此时我们的主机相当于还只是一个电脑,需要安装nginx代理服务器

回到xshell面板 输入 yum install nginx 安装nginx服务器

linux常用指令:cd进入文件夹   /表示根目录  ls显示当前目录下所有文件 cd ../退回上一层目录 

linux中 蓝色的表示文件夹 白色的表示文件 vim xxx可以进入编辑文件

安装完成后 输入cd /进入根目录,nginx默认被安装到了根目录的etc文件下

前端项目部署到服务器

 cd etc 里面有nginx文件夹

前端项目部署到服务器

 cd nginx进入nginx文件夹

找到nginx.conf 是nginx的配置文件

前端项目部署到服务器

 

vim nginx.conf编辑nginx的配置文件

修改user为root

前端项目部署到服务器

在server中可以指定端口号文件路径,listen表示监听的端口号,默认是80 我们可以自己修改

root是访问改主机的这个端口的时候,会到哪个根目录下去找资源,这里就是将我们的dis文件的目录放进来就可以了。

index是在root指定的目录下去找哪个文件 

前端项目部署到服务器

 修改完成之后保存退出 重启一下nginx服务器即可

nginx启动命令:nginx

nginx停止命令:nginx -s stop

vim用到的命令:q!不修改退出 wq保存退出

如果用到了代理已经history模式的话 还需要再location中去配置,这里暂时没有用到  后面会补充文章来源地址https://www.toymoban.com/news/detail-443063.html

到了这里,关于前端项目部署到服务器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端部署】vue项目打包并部署到Linux服务器

    在vs code中打开vue前端项目文件夹,在终端中输入 npm run build ,打包完成后,在前端项目文件夹中会生成一个名为 dist 的文件夹,如下图所示: dist文件夹打开如下所示: 打开服务器终端,在终端中输入以下命令,下载nginx安装包。 其中nginx版本可以自己选择,具体版本可查看

    2024年02月06日
    浏览(42)
  • 前端vue和node后端项目部署到云服务器(详解)

    前言:我是一名大三在校生,选修的专业是软件工程,然后主要学前端方向,作为一个前端程员,自己也想有自己的网站,然后被大家浏览,我觉得这是对自己能力的肯定,也是自我提升的一种方法,所以我学习了nodejs,利用nodejs作为项目的后端,然后结合前端最流行的框架

    2024年02月03日
    浏览(29)
  • 如何将微前端项目部署在同一台服务器同一个端口下

    作者:京东科技 高飞 本文旨在通过部署微前端项目的实践过程中沉淀出一套部署方案,现就一些重点步骤、碰到的问题做了一些总结。 因为线上部署主应用时需要用到子应用的线上可访问地址,因此部署顺序应该是先部署子应用,保证子应用能够线上可访问后,再将子应用

    2023年04月11日
    浏览(33)
  • 将前端vue项目部署到服务器上(详细教程&各种bug解决办法)

    1、修改文件中的配置(解决打包后点击index.html空白页的情况) 将vue.config.js下的publicPath从 \\\'/\\\' 改成 \\\'./\\\' 2、将写好的项目打包 正常的命令是npm run build, 如果是使用vue-admin-template则使用npm run build:prod 3、使用Xftp将打包后的dist传到服务器上,最好传到root目录下 4、 在服务器上安

    2024年02月13日
    浏览(30)
  • 关于前端vue打包项目以及静态网站部署项目到阿里云ECS云服务器初学简单教程

    准备工作: 1.首先进入https://ecs.console.aliyun.com/ 领取或者购买一台简单的ECS云服务器。 进入网站注册登录后拉到页面最下面或者顶部搜索免费云服务器领取立即试用 ,当然富哥花钱买一台服务器也行。   创建完了以后可以进入云服务ECS工作台,然后就是以下界面   点击右边

    2024年02月04日
    浏览(41)
  • 用Nginx将前端Vue项目部署到云服务器(含代理实现请求跨域)

    记录使用Nginx将 纯前端 的Vue3项目部署到阿里云服务器(Ubuntu 22.04)上,包含通过Nginx代理实现 跨域请求 、以及个人踩坑记录~ 执行下列命令安装: 安装完成后查看nignx版本,显示版本信息则说明安装成果 启动nginx,如正确启动,则不会出现任何提示信息。 nginx启动成功后打

    2024年04月12日
    浏览(33)
  • 手把手教小白如何在Window系统下搭建Nginx服务器环境并部署前端项目

    这里日后补充… 在nginx官网http://nginx.org/en/download.html 下载稳定版至自己想要的目录下。 然后解压文件(没有exe的安装过程),下在解压后进入其目录如下: (注意:安装目录最好不要有中文,否则启动时容易报错) 启动方式有两种: (1)直接进入nginx安装目录下,双击n

    2024年02月16日
    浏览(37)
  • 前端部署(包括node服务端部署)--手动部署到服务器

    在阿里云(或者其他厂商)购买域名,有些域名需要备案 接着购买服务器,镜像选择Ubuntu/CentOS的(Linux) 公网带宽的就按使用量来收费:10Mbps(自己使用的话) 系统配置:配置密码 之后购买成功,获得公网ip 初次先进行远程连接,在终端里面:ssh root@公网ip(powershell可以填写ssh了)

    2024年03月25日
    浏览(34)
  • 部署 ssm 项目到云服务器上(购买云服务器 + 操作远程云服务器 + 服务器中的环境搭建 + 部署项目到服务器)

    推荐的做法:买一个云服务器。(主要是要有一个外网 IP) 好处:① 方便 (如果自己搭建,就比较麻烦)、② 便宜 (如果只是为了学习使用,最低配置的服务器完全够用,不到 50 元就能买一年使用权)、③ 有外网 IP ,可以部署项目(有了外网 IP,我们部署的项目,别人

    2024年02月11日
    浏览(48)
  • docker在服务器中部署多个前端

            因为要做毕设买了个云服务器玩玩,刚好设做到一半,用用户端和后台两个vue的前端项目部署到服务器上做个测试~         现在阿里云的域名备案有点麻烦,现在就用IP端口号就为访问网址。 在线独立课程题库管理与考试系统 http://8.134.135.177:9528/ exam-user http://8.13

    2024年04月27日
    浏览(23)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包