一、登录服务器

  1. 登录跳板机

  2. 执行 list ,列出所有机器

  3. 执行 dssh 机器序号 ,如 dssh  ,选择机器


二、 创建nginx配置文件

  1. 进入nginx配置目录: cd usr/local/nginx/conf/vhosts

  2. 提升权限: sudo su

  3. 创建配置文件: touch www.my-app.com.conf ,配置文件以.conf结尾,( 若有其他默认配置文件,可以修改该文件后缀,让默认配置文件失效 )

  4. 编辑配置文件内容: vim www.my-app.com.conf ,内容如下:

    server {
    listen ;
    server_name www.my-app.com;
    #root /usr/share/nginx/html;

    # Load configuration files for the default server block.
    # include /etc/nginx/default.d/*.conf;

    access_log /data/log/nginx/www.my-app.com.log my-app;

    location ~ / {

    root /data/www/my-app/dist;

    index index.html;


    if ($request_filename ~ .*\.(htm|html)$)
    {
    add_header Cache-Control no-store;
    }

    try_files $uri $uri/ /index.html;
    }

    error_page 404 /404.html;
    location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
    }
    }

    注:

    listen:端口号

    server_name:域名

    access_log:日志文件在服务器的存储位置(目录需手动创建,日志文件自动生成)

    location.root:代码在服务器的存储位置(项目打包后的dist文件夹位置)

  5. 退出编辑并保存: :wq


三、部署代码

  1. 本地项目代码打包: npm run build

  2. 进入配置文件中保存代码的目录: cd /data/www/

  3. 三种方式上传代码:

    • a. 从远程仓库clone,若用http方式,需输入git仓库的用户名密码;若用ssh方式,需配置ssh key

      配置ssh key:

      1. 在服务器执行 ssh-keygen -t ed25519 -C "email@example.com" ,一直enter,生成ssh key

      2. 复制生成的公用ssh key, cd /root/.ssh,vim id_ed25519.pub

      3. 在git仓库,设置 -> ssh 秘钥 -> 粘贴 -> 添加秘钥

    • b. scp上传

      1. 压缩打包后的dist文件夹, tar -zcvf ./dist.tar.gz ./dist

      2. 在本地执行  scp /my-app/dist.tar.gz root@xx.xx.xx.xx:/data/www/my-app ,将本地压缩包上传到服务器对应的文件夹中/data/www/my-app

      3. 解压上传的文件, tar -zxvf dist.tar.gz

      4. 删除压缩包, rm -rf dist.tar.gz ,( 也可暂时保存,当做备份 )

    • c. rz -be 上传

      1. 压缩打包后的dist文件夹, tar -zcvf ./dist.tar.gz ./dist ,

      2. 在服务器执行 rz -be ,手动上传压缩包

      3. 解压上传的文件, tar -zxvf dist.tar.gz

      4. 删除压缩包, rm -rf dist.tar.gz ,( 也可暂时保存,当做备份 )


四、重启nginx

  1. 进入nginx执行文件目录, cd /usr/local/nginx/sbin

  2. 若nginx未启动,启动nginx, ./nginx

  3. 若nginx已启动,重新启动nginx, ./nginx -s reload

nginx前端服务部署的更多相关文章

  1. nginx——前端服务环境

    背景:之前一直使用tomcat服务器来作为测试环境:(vue项目打包后想测试下生产环境下有没有问题!使用tomcat有各种问题,还怀疑是我们源码有问题?尴尬)今天公司同事才告诉我tomcat是专门为j ...

  2. Dockerfile + Nginx.conf文件记录(用于前端项目部署)

    Dockerfile + Nginx.conf文件记录(用于前端项目部署) 本教程依据个人理解并经过实际验证为正确,特此记录下来,权当笔记. 注:基于linux操作系统(敏感信息都进行了处理),默认服 ...

  3. nginx服务部署 说明

    第1章 常用的软件 1.1 常用来提供静态服务的软件   Apache :这是中小型Web服务的主流,Web服务器中的老大哥,   Nginx :大型网站Web服务的主流,曾经Web服务器中的初生牛犊 ...

  4. Nginx服务部署

    1 企业常用网站服务 处理静态资源:nginx.apache.Lighttpd处理动态资源:tomcat(java语言编写).php(php语言编写).python(python语言编写)nginx网 ...

  5. 使用idea开发工具,nginx服务部署Extjs6,SpringBoot项目到服务器

    编译ExtJs文件 1.输入命令 2.开始编译 3.找到编译后的文件 E:\idea_project\BaiSheng_Model\fin-ui\build\production\Admin 4.将文 ...

  6. Linux服务部署Yapi项目(安装Node Mongdb Git Nginx等)

    Linux服务部署Yapi 一,介绍与需求 1,我的安装环境:CentOS7+Node10.13.0+MongoDB4.0.10. 2,首先安装wget,用于下载node等其他工具 yum insta ...

  7. 服务发现之consul理论整理_结合Docker+nginx+Tomcat简单部署案例

    目录 一.理论概述 服务发现的概念简述 consul简述 二.部署docker+consul+Nginx案例 环境 部署 三.测试 四.总结 一.理论概述 服务发现的概念简述 在以前使用的是,N台机器 ...

  8. 部署Nginx网站服务实现访问状态统计以及访问控制功能

    原文:https://blog.51cto.com/11134648/2130987 Nginx专为性能优化而开发,最知名的优点是它的稳定性和低系统资源消耗,以及对HTTP并发连接的高处理能力,单个物 ...

  9. 【转】Linux服务部署--Java(三) Nginx

    原文地址:Nginx Linux详细安装部署教程 一.Nginx简介 Nginx是一个web服务器也可以用来做负载均衡及反向代理使用,目前使用最多的就是负载均衡,具体简介我就不介绍了百度一下有很多,下 ...

随机推荐

  1. 《C程序设计语言》练习 1-12

    #include<stdio.h> /*编写一个程序,以每行一个单词的形式打印其输入*/ main() { int c; c=getchar(); while(c!=EOF) { if ( ...

  2. maven中指定build一个project中几个特定的子modules

    问题由来: 一个项目可能会有多个子module,在特定情况下可能只需要build其中几个module. 例如我的项目的目录结构如下 myproject |------------module_one ...

  3. ofo小黄车推出车身商业化广告,能自救成功吗?

    ofo终于还是扛不住了!作为之前与摩拜相抗衡的巨头,ofo其实也是最被看好的共享单车企业之一.可惜共享单车行业的窘境,终究不是成为巨头后就能拯救的.摩拜被美团收购后,ofo就成为巨头垂涎的目标.数十亿 ...

  4. Office Lens:口袋中的扫描仪

    Lens:口袋中的扫描仪" title="Office Lens:口袋中的扫描仪"> 编者按:开会时,你是否觉得白板上天马行空的讨论记录誊抄起来费时费事又难以共享- ...

  5. Office 365 的安装方法

    一.在线安装 进入网址 https://www.office.com/ 使用office账号登陆 1.点击右上角安装office应用,选择第二项 其他安装选项 2.选择安装语言 点击高级,选择安装版本 ...

  6. 框架之MyBatis

    什么是框架,简单的来说框架就是一个程序的半成品,而我们就是的工作就是根据我们的工作需要将其完善.MyBatis框架的作用就是将我们使用JDBC操作数据库的过程移交给MyBatis,让它来帮我们完成这些 ...

  7. jmeter如何解决乱码问题

    使用jmeter的时候时常遇到中文乱码的情况,下面总结一下几个解决方法,方便以后进行复习. 1.添加后置处理器Beanshell PostProcessor,在输入框内写入“prve.setDateE ...

  8. 微软推出精简版Windows10Lean系统意欲何为?

    提起Windows系统,自然无须多言都知道它的重要性.在经历了Windows Vista的失败. Windows 7的成功.Windows 8的平庸和Windows 10的复兴之后,微软算是积累下了大 ...

  9. 【AUTO Uninstaller - 使用教程】Autodesk系列软件终极完美修复卸载工具【转载】

    小伙伴是不是遇到 CAD/3dmax/maya/Revit/Inventor 安装失败或者安装不了的问题了呢?AUTODESK系列软件着实令人头疼,CAD/3dmax/maya/Revit/Inven ...

  10. stress施压案例分析——cpu、io、mem【命令分析】

    stress施压命令分析 一.stress --cpu 1 --timeout 600  分析现象?负载为啥这么高?top命令查看用户进程消耗的cpu过高(stress进程消耗的) 分析现象,可以看出 ...