位置: IT常识 - 正文

前端如何将项目部署到服务器(Nginx)(前端如何将项目分类)

编辑:rootadmin
前端如何将项目部署到服务器(Nginx) 文章目录一、准备环境二、安装Nginx1、 安装Nginx依赖2、下载Nginx3、解压下载好的Nginx 压缩包4、编译安装Nginx5、启动Nginx服务三、操作步骤1、使用Xshell连接服务器2、上传静态资源文件3、 配置Nginx4、 重启Nginx服务

推荐整理分享前端如何将项目部署到服务器(Nginx)(前端如何将项目分类),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端项目文档怎么写,前端如何将项目分开,前端如何将项目分成,如何把前端项目部署到服务器,前端如何将项目写入简历中,前端如何将项目分类,前端如何将项目分类,前端如何将项目分开,内容如对您有帮助,希望把文章链接给更多的朋友!

我们在会开发项目的同时,也应该了解一下前端是如何部署项目的;

一、准备环境1、服务器或者虚拟机(后端已经搭建好的,这里就不讲述如何搭建服务器了)2、Xshell 和 Xftp --> 存放静态文件和操作服务器3、Windows系统Xshell:是一个强大的安全终端模拟软件,可以在Windows界面下用来访问远端不同系统下的服务器。(作用就是用来连接远程服务器的)Xftp:是一个功能强大的SFTP、FTP 文件传输软件。(作用是存放静态文件和上传静态资源)二、安装Nginx

使用Xshell连接服务器,既然想要在服务器上面放静态资源,像HTML,js等,就需要安装静态资源服务器。静态资源服务器有Apache和Nginx,这里我们选用nginx。

1、 安装Nginx依赖yum install -y pcre pcre-develyum install -y zlib zlib-develyum install gcc-c++yum install -y openssl openssl-devel2、下载Nginxwget -c https://nginx.org/download/nginx-0.1.18.tar.gz3、解压下载好的Nginx 压缩包

找到安装包Nginx安装路径,并在目录下进行解压。

tar -zxvf nginx-0.1.18.tar.gz

进入解压好的Nginx目录下:

cd nginx-0.1.184、编译安装Nginx./configure --with-http_ssl_modulemakemake install5、启动Nginx服务前端如何将项目部署到服务器(Nginx)(前端如何将项目分类)

找到安装目录:

whereis nginx

启动服务:

/usr/local/nginx/sbin/nginx

或者进入Nginx目录下启动:

./nginx三、操作步骤1、使用Xshell连接服务器

输入服务器名称、地址、端口号,连接成功后会让你输入账号和密码,账号一般是默认的root。 在Xshell中启动Nginx:

1、查找安装的路径:whereis nginx;2、执行Nginx启动命令:/usr/local/nginx/sbin/nginx;3、查看服务运行状态:ps -ef | grep nginx;4、停止服务:kill 进程号; /usr/local/nginx/sbin/nginx -stop5、重启服务:/usr/local/nginx/sbin/nginx -s reopen2、上传静态资源文件

连接Xftp,进行文件传输。服务器的根目录是 /root ,这里可以创建一个自己的项目文件目录进行静态资源文件的存放。直接把打包后的dist文件放在目标目录即可。

3、 配置Nginx

在Xhell中进行Nginx的配置:

配置命令:vim /usr/local/nginx/conf/nginx.conf(vim + nginx目录)

按insert键进入编辑模式,说明以及配置文件如下:

#全局块 :配置影响nginx全局的指令。一般有运行nginx服务器的用户组,nginx进程pid存放路径,日志存放路径,配置文件引入,允许生成worker process数等。#user nobody/root; #配置用户或者组,默认为nobody rootuser root;worker_processes 1; #允许生成的进程数,默认是1#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid; #指定nginx进程运行文件存放地址events { #event块:配置影响nginx服务器或与用户的网络连接。有每个进程的最大连接数,选取哪种事件驱动模型处理连接请求,是否允许同时接受多个网路连接,开启多个网络连接序列化等。 accept_mutex on; #设置网路连接序列化,防止惊群现象发生,默认为on multi_accept on; #设置一个进程是否同时接受多个网络连接,默认为off #use epoll; #事件驱动模型,select|poll|kqueue|epoll|resig|/dev/poll|eventport worker_connections 1024; #最大连接数,默认为512}http { #http块:可以嵌套多个server,配置代理,缓存,日志定义等绝大多数功能和第三方模块的配置。如文件引入,mime-type定义,日志自定义,是否使用sendfile传输文件,连接超时时间,单连接请求数等。 include mime.types; #文件扩展名与文件类型映射表 default_type application/octet-stream; #默认文件类型,默认为text/plain、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; #keepalive_timeout 0; keepalive_timeout 65;#保持请求活跃时间 #gzip on;#error_page 404 https://www.baidu.com; #错误页#http全局块 server { #server块:配置虚拟主机的相关参数,一个http中可以有多个server。keepalive_requests 120; #单连接请求上限次数。 listen 80; #监听端口 server_name 127.0.0.1;#监听地址-->设置对应监听的域名xxx.com www.baidu.com #charset koi8-r; #access_log logs/host.access.log main;#请求的url过滤,正则匹配,~为区分大小写,~*为不区分大小写。 location / { #location块:配置请求的路由,以及各种页面的处理情况。#root path; #根目录#index vv.txt; #设置默认页 root html; index index.html index.htm;#proxy_pass http://mysvr; #请求转向mysvr 定义的服务器列表-->可以填写自己的服务器地址#proxy_read_timeout 150; 代理连接超时时间#deny 127.0.0.1; #拒绝的ip#allow 172.18.5.54; #允许的ip } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #} # 测试配置 server { listen 8777; server_name http://127.0.0.1/; gzip on; # 开启Gzip # gzip_static on; # 开启静态文件压缩 这句话不要 gzip_min_length 1k; # 不压缩临界值,大于1K的才压缩 gzip_buffers 4 16k; gzip_comp_level 5; gzip_types application/javascript application/x-javascript application/xml application/xml+rss application/x-httpd-php text/plain text/javascript text/css image/jpeg image/gif image/png; # 进行压缩的文件类型 gzip_http_version 1.1; gzip_vary on; gzip_proxied expired no-cache no-store private auth; gzip_disable "MSIE [1-6]\."; location / { root /home/myProject/dist; # root表示根目录,这里的路径需要与Xftp上传的静态资源文件的路径一致 index index.html index.htm; try_files $uri $uri/ /index.html; } location @router { rewrite ^.*$ /index.html last; } }}

修改完成后:wq 保存退出。

4、 重启Nginx服务重启命令:/usr/local/nginx/sbin/nginx -s reopen

最后在浏览器中输入:http://127.0.0.1:8777/即可访问部署成功的项目;

本文链接地址:https://www.jiuchutong.com/zhishi/298620.html 转载请保留说明!

上一篇:【深度学习时间序列预测案例】零基础入门经典深度学习时间序列预测项目实战(附代码+数据集+原理介绍)

下一篇:【014】基于Vue.js的移动端购物商城网站(含源码、课设报告)(基于vue的ui)

  • sony psp3000开不了机(sony psp3000)(索尼psp2000开机)

    sony psp3000开不了机(sony psp3000)(索尼psp2000开机)

  • ip地址与网上的其他系统有冲突怎么办(ip地址与网络上的其他系统有冲突怎么解决)(ip地址和网址)

    ip地址与网上的其他系统有冲突怎么办(ip地址与网络上的其他系统有冲突怎么解决)(ip地址和网址)

  • win10和win7哪个吃硬件(win10和win7哪个吃资源)

    win10和win7哪个吃硬件(win10和win7哪个吃资源)

  • 闲鱼退款申请自动关闭后多久会自动确认(闲鱼退款申请自动关闭后多久打款)

    闲鱼退款申请自动关闭后多久会自动确认(闲鱼退款申请自动关闭后多久打款)

  • 怎么删除抖音视频(怎么删除抖音视频里自己拍的作品)

    怎么删除抖音视频(怎么删除抖音视频里自己拍的作品)

  • iphone x支持分屏吗(苹果x可以分屏不)

    iphone x支持分屏吗(苹果x可以分屏不)

  • ipadpro可以当电脑吗(ipad pro可以当充电宝吗)

    ipadpro可以当电脑吗(ipad pro可以当充电宝吗)

  • airpods2防水嘛(airpods2代防水吗)

    airpods2防水嘛(airpods2代防水吗)

  • 电脑右键粘贴是灰色的(电脑右键复制粘贴没有了)

    电脑右键粘贴是灰色的(电脑右键复制粘贴没有了)

  • 网易考拉收藏在哪里(网易考拉最近怎么了)

    网易考拉收藏在哪里(网易考拉最近怎么了)

  • 路由器上光信号闪红灯是什么意思(路由器上光信号不亮是怎么回事)

    路由器上光信号闪红灯是什么意思(路由器上光信号不亮是怎么回事)

  • 卡贴一直放手机里会坏吗(卡贴放在手机里 为什么无服务)

    卡贴一直放手机里会坏吗(卡贴放在手机里 为什么无服务)

  • 旺旺号降权多久恢复(旺旺号降权多久后才会恢复正常)

    旺旺号降权多久恢复(旺旺号降权多久后才会恢复正常)

  • 模糊的照片可以修复清晰吗(模糊的照片可以发朋友圈吗)

    模糊的照片可以修复清晰吗(模糊的照片可以发朋友圈吗)

  • 华为畅享9支持nfc吗(华为畅享9支持NFC吗)

    华为畅享9支持nfc吗(华为畅享9支持NFC吗)

  • 华为mate30pro出厂带膜吗(华为mate30pro出厂价多少钱)

    华为mate30pro出厂带膜吗(华为mate30pro出厂价多少钱)

  • 天猫精灵cc可以远程监控吗(天猫精灵cc可以和手机视频吗)

    天猫精灵cc可以远程监控吗(天猫精灵cc可以和手机视频吗)

  • 云拨电话怎么隐藏号码(云拨电话怎么隐藏自己电话号码)

    云拨电话怎么隐藏号码(云拨电话怎么隐藏自己电话号码)

  • 原彩显示是什么意思(原彩显示是什么原理)

    原彩显示是什么意思(原彩显示是什么原理)

  • vivox9s手机备份在哪里(vivo手机备份数据)

    vivox9s手机备份在哪里(vivo手机备份数据)

  • 笔记本能用红外遥控吗(笔记本有红外遥控功能吗)

    笔记本能用红外遥控吗(笔记本有红外遥控功能吗)

  • 抖音能投屏到电视上吗(抖音能投屏到电视上去吗)

    抖音能投屏到电视上吗(抖音能投屏到电视上去吗)

  • iphone x原彩显示在哪里(iphonex原彩显示有什么用)

    iphone x原彩显示在哪里(iphonex原彩显示有什么用)

  • mac版ps快捷键(mac版ps快捷键设置怎么弄成win版)

    mac版ps快捷键(mac版ps快捷键设置怎么弄成win版)

  • wps表格无法粘贴信息(wps表格无法粘贴怎么办)

    wps表格无法粘贴信息(wps表格无法粘贴怎么办)

  • 安卓beatsx怎么看电量

    安卓beatsx怎么看电量

  • win10 microsoft store如何修改下载路径?win10应用商店修改默认下载路径教程(win10 microsoft store怎么改变下载途径)

    win10 microsoft store如何修改下载路径?win10应用商店修改默认下载路径教程(win10 microsoft store怎么改变下载途径)

  • vue3+vite:本地代理,配置proxy(vue怎么使用本地存储比较好)

    vue3+vite:本地代理,配置proxy(vue怎么使用本地存储比较好)

  • Apsara Clouder云计算专项技能认证:云服务器ECS入门[考试真题分享](Apsara Clouder云计算技能认证)

    Apsara Clouder云计算专项技能认证:云服务器ECS入门[考试真题分享](Apsara Clouder云计算技能认证)

  • 目前最强的AI绘画模型——Midjourney v5(ai技术排名)

    目前最强的AI绘画模型——Midjourney v5(ai技术排名)

  • 职工福利费计税税率
  • 个人出租非住房房产税怎么计算
  • 汇算退回的所得税分录
  • 公司改名之前发工资吗
  • 专项附加扣除项目的6项具体规定有哪些
  • 个体户定额交税还用交个税吗
  • 什么样的运输发动机最好
  • 租了房子再转租
  • 购买的原材料直接用怎么做账
  • 材料加工计入什么科目
  • 健身房开业前买的瑜伽垫怎么做账?
  • 人力资源外包公司排名
  • 关于银行借贷的法律知识
  • 委外技术服务费应归集哪个研发项目
  • 去税局代开增值税专票需要什么资料?
  • 季度有利润可以弥补以前年度亏损吗
  • 补提以前年度摊销
  • 以前年度未申报的专项附加扣除
  • 递延收益摊销会计分录
  • 流氓软件怎么卸载?
  • 年终奖发放与补发的区别
  • win10专业版下载教程
  • 高新技术企业所得税优惠政策最新2022
  • 股东撤资属于什么科目
  • 常见的财务报表分析方法有多选题
  • html 调用扫码
  • 藏红花 (© Hayami Yanagisawa/Getty Images)
  • 若依框架使用
  • 什么是Unicode
  • php curl_init
  • yum安装php5
  • jquery教程chm
  • vue做项目的流程
  • dns域名解析两种方式
  • php第三方支付
  • 03-JavaScript基础
  • 发票错开退税款什么时候退回
  • 小微企业认定办法
  • 增值税普通发票几个点
  • 公司清算的特征
  • 安装sqlserver2005警告iis
  • 预提费用在资产负债表中如何列示
  • 结转上年
  • 经营出租固定资产折旧费计入什么科目
  • 外贸企业出口货物会计分录
  • 境外汇款免税
  • 申报前的增值税怎么算
  • 独资合伙公司
  • 会计做账的原始凭证有哪些
  • 高危险工作人员有什么意外险
  • 垃圾清运费会计处理
  • 支付劳务费后缴多少税
  • 债务重组的会计例题
  • 如何冲其他应付款发票
  • 营业账簿印花税怎么申报
  • 银行利息收入的会计分录怎么写
  • 复利年金终值计算器
  • 餐饮店原材料表格
  • 数据库表的查询学会了什么
  • win7一直弹广告怎么办
  • mac电脑拷贝文件在哪里
  • centos 虚拟化
  • window 8
  • mac10.95升级
  • Win7打印机安装
  • linux删除lun
  • WIN10系统中断
  • mysqld是什么进程
  • linux文本操作命令
  • linux中使用bash是什么意思
  • 教女朋友学英语
  • photon server 限制防火墙
  • js函数function用法
  • java回收机制原理
  • 安卓中textview
  • bootstrap范例
  • 详解16型人格
  • 云南省税务局咨询电话
  • 开具红字增值税专用发票通知单
  • 国税局发票查询电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设