一、登录服务器

  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. idea生成serialVersionUID

    默认情况下Intellij IDEA不会提示继承了Serializable接口的类生成serialVersionUID的警告.如果需要生成serialVersionUID,就要在Preferences ...

  2. Xen入门系列二【使用 virt-install 安装虚拟机】

    系统环境:Centos 6.5 + Xen4Centos安装方式 相关链接:Xen4Centos方式安装Xen请查看:http://www.cnblogs.com/hackboy/p/3662432. ...

  3. [LC] 244. Shortest Word Distance II

    Design a class which receives a list of words in the constructor, and implements a method that takes ...

  4. 学习python-20191208(2)-Python Flask高级编程开发鱼书_第03章_数据与flask路由

    视频06: 定义静态方法的两种方式: 1.在方法上方加上装饰@staticmethod 2.在方法上方加上装饰@classmethod  方法中要加参数cls  如:def search_by_isb ...

  5. 同步linux系统时间

    Linux的时间分为System Clock(系统时间)和Real Time Clock (硬件时间,简称RTC). 系统时间:指当前Linux Kernel中的时间. 硬件时间:主板上有电池供电的时 ...

  6. .js——alert()语句

    在.js文件中,通过alert()语句可以生成弹出框,弹出框中的内容message部分可以是常量字符串,也可以是含有变量的字符串连接,下面举几个例子简要说明下: 1. 参数为常量字符串 alert(& ...

  7. Spring Boot 学习笔记(六) 整合 RESTful 参数传递

    Spring Boot 学习笔记 源码地址 Spring Boot 学习笔记(一) hello world Spring Boot 学习笔记(二) 整合 log4j2 Spring Boot 学习笔记 ...

  8. Ubuntu gnome安装Monaco字体,FontForge module is probably not installed

    首先下载原始Monaco字体,注意我只找到了这一款在ubuntu的gnome下可见,其他的各种monaco即使安装了也看不到. https://gist.github.com/epegzz/16342 ...

  9. mysql视图、事务、触发器、索引

    视图 什么是视图 ? 一个查询语句的结果是一张虚拟表,将这种虚拟表保存下来,它就变成了一个视图. 为什么要用视图? 当频繁需要用到多张表的连表结果,你就可以事先生成好视图,之后直接调用即可,避免了反复 ...

  10. MatterTrack Route Of Network Traffic :: Matter

    Python 1.1 基础 while语句 字符串边缘填充 列出文件夹中的指定文件类型 All Combinations For A List Of Objects Apply Operations ...