精华内容
下载资源
问答
  • 这篇文章讲解如何在一个nginx部署两个vue项目,还有root和alias的区别。 路径问题 首先先假设主域名为:www.yuming.com。要绑定的子域名是www.yuming.com/two 下图先展示一个项目时的nginx配置。api为后端java项目...

    这篇文章讲解如何在一个nginx上部署两个vue项目,还有root和alias的区别。

    路径问题

    首先先假设主域名为:www.yuming.com。要绑定的子域名是www.yuming.com/two
    下图先展示一个项目时的nginx配置。api为后端java项目的接口。

        server {
            listen       80;
            server_name  www.yuming.com;
    
            location / {
            	//默认路径是Nginx下的html文件里,我是自定义的路径,dist是vue-cli打包出来的文件
                root   /var/myvue/dist;
                index  index.html index.htm;
                //开启了model: 'history'就需要加入下面的话,大体的意思是可能会找不到页面。
                //如果没找到就返回Index页面
                try_files $uri $uri/ /index.html;
            }
    
    		//当当问www.yuming.com/api/*** 的时候访问路径会转往下面设置的端口。
            location /api/ {
                proxy_pass http://127.0.0.1:某一端口;
                tcp_nodelay on;
                proxy_set_header Host $host;
                proxy_set_header X-Real_IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            }
    
        }
    

    关于vue-router的history模式

    截了vue-router文档的图。更进一步了解请点击此页面HTML5 History 模式
    在这里插入图片描述
    在这里插入图片描述

    开始部署两个vue项目

    1.vue项目配置
    vue.config.js

    module.exports = {
      // 如果用注解的这个就是生产出来,也就是打包后的路径为localhost:****/api,开发模式还是localhost:****
      // publicPath: process.env.NODE_ENV === 'two'
      //   ? '/two/'// 这个是是生产者环境的值
      //   : '/',
      publicPath: '/two/',//因为既然已经决定把它当子路径用了就直接设置,不判断了。
     }
    

    vue-router里的index.js

    const router = new VueRouter({
      mode: 'history',
      //加上base,把应用的基础路径改为/two/
      base: '/two/',
      routes
    })
    

    vue-router官方页面参考
    vue-router的api
    在这里插入图片描述
    如上配置后你这个项目启动后的路径应为localhost:端口/two

    两个vue项目时的nginx配置

        server {
            listen       80;
            server_name  www.yuming.com;
    
            location / {
                root   /var/myvue/dist;
                index  index.html index.htm;
                try_files $uri $uri/ /index.html;
            }
    
            location /api/ {
                proxy_pass http://127.0.0.1:****;
                tcp_nodelay on;
                proxy_set_header Host $host;
                proxy_set_header X-Real_IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            }
    
            location /two {
            	//注意这里用的是alias
                alias /var/two/dist;
                index index.html index.htm;
                try_files $uri $uri/ /two/index.html;
            }
    
        }
    

    root与alias的区别

    假设我们访问www.yuming.com/two,请求two请求对应的页面,我们用root来配第二个项目,如下图。

            location /two {
            	//注意这里用的是alias
                root /var/two/dist;
                index index.html index.htm;
                try_files $uri $uri/ /two/index.html;
            }
    

    对于服务器来说其实我们访问的地址是 /var/myvueTwo/dist/two/index.html。但我们想访问的其实是 /var/myvueTwo/dist/index.html所以如上配置访问服务器时会出现找不到资源的情况。
    原因是因为,root对请求的方法接受形式是,路径加上请求,也就是root(/var/myvueTwo/dist)+访问的资源(two)+index.html
    而alias的接受形式是alias(/var/myvueTwo/dist)+index.html

    上面这段反复琢磨了好几遍,应该是没错了,错了的话请指正。

    展开全文
  • 主要介绍了docker nginx 部署个项目的示例方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了nginx部署vue项目的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 关于Nginx部署个项目(多个Tomcat)

    千次阅读 2017-08-11 15:10:50
    1、我是在一台Linux服务器下部署两个Tomcat7,分别为放在Tomcat1、Tomcat2文件夹下 2、将两个项目分别部署到Tomcat服务器webapps目录下; 以上比较简单,不再赘述; 值得注意的是:我这里用的是两个不同的项目、...

    直奔主题

    步骤是:

    1、我是在一台Linux服务器下部署两个Tomcat7,分别为放在Tomcat1、Tomcat2文件夹下

    2、将两个项目分别部署到Tomcat服务器webapps目录下;

    以上比较简单,不再赘述;

    值得注意的是:我这里用的是两个不同的项目、因此和集群部署不一样、集群部署是相同的项目部署到不同的服务器;

    下面我贴出主要的Nginx.conf 配置文件内容:


    server {
            listen       80;
            server_name  coding.net; #这里server_name填写主域名或者ip均可


    index index.jsp index.html;
    root /usr/local/nginx/html;
    # location ~ .* {
    # proxy_pass http://127.0.0.1:9001;
    # proxy_set_header X-Real-IP $remote_addr;
    # }

    location /PayTest1{  
            proxy_pass http://127.0.0.1:9001; #主要是这里,这是tomcat1的端口和项目  
            proxy_set_header           Host $host;  
                proxy_set_header  X-Real-IP  $remote_addr;  
            proxy_set_header           X-Forwarded-For $proxy_add_x_forwarded_for;  
                client_max_body_size  100m;  
                root   html;  
                index  index.html index.htm;  
            }  
      location /PayTest2{  
            proxy_pass http://127.0.0.1:8081; #主要是这里,这是tomcat2的端口和项目
            proxy_set_header           Host $host;  
                proxy_set_header  X-Real-IP  $remote_addr;  
            proxy_set_header           X-Forwarded-For $proxy_add_x_forwarded_for;  
                client_max_body_size  100m;  
                root   html;  
                index  index.html index.htm;  
            }  

            error_page  500 502 503 504  /50x.html;


    其中PayTest1、PayTest2为部署在两个Tomcat下的不同项目。

    关于Linux服务器同时部署两个Tomcat新手需要注意的三点我在这里提一下:

    1:修改关闭TOMCAT服务的端口避免该端口重复被占用

    <!--<Server port="8005" shutdown="SHUTDOWN">--> #(Tomcat1中为8005,)

    <Server port="8006" shutdown="SHUTDOWN">#(Tomcat2中使用8006)

    不修改的话你Tomcat只能成功启动一个

    2:修改代理服务端口

    <!-- <Connector port="8080" protocol="HTTP/1.1"
                   connectionTimeout="20000"
                   redirectPort="8443" /> -->

    <Connector port="8081" protocol="HTTP/1.1"
                   connectionTimeout="20000"
                   redirectPort="8443" />

    3:最后是修改端口(此端口在Tomcat与其他http服务器集成时,就需要使用这个连接器)

    <!--  <Connector port="8009" protocol="AJP/1.3" redirectPort="8443" /> -->

     <Connector port="8010" protocol="AJP/1.3" redirectPort="8443" />

    接下来启动Nginx和两个Tomcat然后就可以用http://coding.net/PayTest1和http://coding.net/PayTest2访问项目了

    展开全文
  • Nginx部署Vue项目

    2020-06-30 18:33:56
    Nginx线上部署Vue项目(路径区分) nginx 多静态文件部署。 我个人博客项目占用了nginx根路径,而我只有一域名,也不准备用二级域名了, 所以就直接用路径区分开。 一域名,只部署静态文件服务,那很简单...

    Nginx线上部署多个Vue项目(路径区分)

    nginx 多静态文件部署。
    我个人博客项目占用了nginx根路径,而我只有一个域名,也不准备用二级域名了, 所以就直接用路径区分开。
    一个域名,只部署一个静态文件服务,那很简单,只用把打包后文件放上去就行。
    多个Vue项目主要就是路径问题,静态js文件以及自定义的路由。

    原文请访问 我个人博客地址

    博客地址: https://www.charmcode.cn/article/2020-06-30_nginx_vue

    环境

    • vue 2.6.11
    • vue-router 3.3.1
    • vue-cli 4.4.0

    由于我用的vue-cli 4,所以项目根路径下默认没有 vue.config.js文件, 我在官网看到关于这个vue.config.js是这样描述的.

    有些针对 @vue/cli 的全局配置,例如你惯用的包管理器和你本地保存的 preset,都保存在 home 目录下一个名叫 .vuerc 的 JSON 文件。你可以用编辑器直接编辑这个文件来更改已保存的选项。
    你也可以使用 vue config 命令来审查或修改全局的 CLI 配置

    添加配置vue.config.js 文件 静态资源路由js,css等路径

    但是 vue config 是全局的配置,我这个项目直接修改这里不合适,于是我就在项目 根路径 下自己手动添加了vue.config.js

    
    // 参考 https://cli.vuejs.org/zh/guide/deployment.html#github-pages
    module.exports = {
        publicPath: process.env.NODE_ENV === 'production'
            ? '/app/mall/'   // /app/mall/ 对应后面`nginx`路径,这里添加的目的是其他静态资源文件统一前缀路径
            : '/',
    };
    

    修改src/router/index.js, 项目页面跳转路由

    const router = new VueRouter({
        base: '/app/mall',   // 主要添加这个 /app/mall 注意这个 和上面的一致,为nginx location路径, 也就是请求路径
        routes,
        mode: 'history'
    });
    
    

    修改 src/config/index.js 项目生产请求地址(非必要)

    非必要,这个地方每个人封装的都不一样,默认会请求 部署的环境地址。

    export let appConfig = {
        development: 'http://127.0.0.1:8010',      // 本地开发 (ps:vue-cli会自动帮我们区分生产开发,npm run serve就是开发,
        production: 'https://www.your_domain.com',  // 生产地址 npm run build 默认为生产
    };
    
    

    然后 我是在src/utils/url.js 文件里面 区分前缀的, 最后在 src/utils/request.js 文件里面使用。

    修改好之后,可以npm run serve看看,区分好之后能否正常访问,是否有改错。
    没有改错可以直接npm run build 生成静态文件

    上传静态文件

    我是通过FillZilla上传静态资源文件

    我是上传到服务器 /data/mall/ 文件夹下, 记住这个文件路径, 后面nginx会指向这里。

    nginx 文件配置

    Centos7 nginx默认配置地址为 /etc/nginx/nginx.conf
    或者有的版本默认引入 /etc/nginx/conf.d/default.conf文件 配置

    
    server {
    
        listen       80;
        server_name  localhost;
    
        #charset koi8-r;
        #access_log  /var/log/nginx/host.access.log  main;
            
        # ...
        location / {
                root   /usr/share/nginx/html;
                index  index.html index.htm;
        }
        
        
        # 添加文件
        # /app/mall 项目访问路径和上面地址对应 
        location /app/mall/ {
            alias /data/mall/;   # 项目存放路径
            try_files $uri $uri/ /app/mall/index.html;  # 内部项目跳转路径
        }
    
    }
    
    

    检测配置是否有语法错误

    nginx -t
    
    

    重新加载配置

    nginx -s reload
    
    

    个人项目部署地址

    线上地址: https://www.charmcode.cn/app/mall/home
    项目Github地址: https://github.com/CoderCharm/Mall/blob/master/DEPLOYMENT.md

    展开全文
  • docker nginx 部署个项目

    千次阅读 2018-11-28 18:59:53
    前提条件 1、本地电脑和服务器已安装 docker,下载方法自行谷歌吧 ... 3、需要对 docker 已有所熟悉 ,并了解Dockerfile里的一些指令 使用Dockerfile 制作镜像 假如本机有一叫web的项目 在web根...

    前提条件

    • 1、本地电脑和服务器已安装 docker,下载方法自行谷歌吧
    • 2、在 docker hub 上已有账号, 注册传送门: https://hub.docker.com/
    • 3、需要对 docker 已有所熟悉 ,并了解Dockerfile里的一些指令

    使用Dockerfile 制作镜像

    假如本机有一个叫web的项目

    在web根目录下新建Dockerfile,写入以下内容

    FROM nginx:1.13.6-alpine
    LABEL maintainer="lilywang <lilywang.cd@gmail.com>"
    
    ARG TZ="Asia/Shanghai"
    
    ENV TZ ${TZ}
    
    RUN apk upgrade --update \
        && apk add bash tzdata \
        && ln -sf /usr/share/zoneinfo/${TZ} /etc/localtime \
        && echo ${TZ} > /etc/timezone \
        && rm -rf /var/cache/apk/*
    
    COPY dist /usr/share/nginx/html 
    
    CMD ["nginx", "-g", "daemon off;"]
    

    此时web里的文件结构为:

    .
    |____Dockerfile
    |____dist // 为项目打包后的文件
    | |____index.html

    接下来在bash 进入到web目录

    cd web

    docker build -t lilywang711/web .
    请把lilywang711替换成你的 docker hub 的用户名,web 是项目名称
    看到打印信息中有如下就说明镜像已经构建成功了

    Successfully built 4c050212ce0d
    Successfully tagged lilywang711/web:latest

    也可以输入docker images 查看当前的镜像列表

    接下来输入命令 docker push lilywang711/web 就可将刚才构建好的镜像上传到docker hub里面,方便等会儿我们在服务端拉取镜像

    如果是有多个项目需要部署,那就按照以上步骤重复来就行,有多少个项目就构建多少个镜像

    服务端部署

    ssh 登陆服务器,在当前用户目录下(我是root目录),新建 nginx 文件夹,并在里面新建nginx.conf
    在 nginx.conf 中写入以下内容

    user nginx;
    worker_processes  2;
    error_log  /var/log/nginx/error.log warn;
    pid        /var/run/nginx.pid;
    events {
        use epoll;
        worker_connections  2048;
    }
    http {
        include  /etc/nginx/mime.types;
        # include /etc/nginx/conf.d/*.conf;
        root /usr/share/nginx/html;
        index  index.html index.htm;
        server {
            listen 80;
            server_name  a.yourdomain.cn;
            location / {
            }
        }
        server {
            listen 80;
            server_name  b.yourdomain.cn;
            location / {
                proxy_pass http://your_vps_ip:81;
            }
        }
        server {
            listen 80;
            server_name  localhost;
            location / {
            }
        }
    }

    接下来

    启动docker systemctl start docker

    拉取刚才制作并上传好的两个镜像

    docker pull lilywang711/web

    docker pull lilywang711/web1

    输入以下命令启动容器

    docker run -itd --name web -p 80:80 -v /root/nginx/nginx.conf:/etc/nginx/nginx.conf lilywang711/web
    // -i 交互模式运行容器, -t 为容器分配一个伪终端,-d 后台运行容器,可直接连写 -itd
    // --name 是给该容器起个叫web的名字,方便辨识
    // -p 是绑定端口 本机端口80:容器端口80
    // -v 声明volume,意思是将容器中的/etc/nginx/nginx.conf 挂载到 宿主机里的/root/nginx/nginx.conf,以后配置nginx只需要修改/root/nginx/nginx.conf就行了

    另外一个lilywang711/web1镜像也同理,修改下端口和名字就好了

    docker run -itd --name web1 -p 81:80 -v /root/nginx/nginx.conf:/etc/nginx/nginx.conf lilywang711/web1

    此时输入 docker ps 就可以看到这两个容器已经跑起来了

    docker化项目并在nginx部署就已经完成了

    在浏览器输入 http://a.yourdomain.cnhttp://b.yourdomain.cn 就可以看到效果了,分别对应本地电脑中的web 和 web1 项目

    clipboard.png

    clipboard.png

    展开全文
  • nginx部署nuxt多项目

    千次阅读 2020-04-03 00:38:52
    一、背景:之前使用nginx部署了一个nuxt的项目,参考的是这篇文章Nuxt项目的部署,现在部署多项目,先参考的是这篇文章 nginx配置多个项目 ,使用Nginx要在同一个域名下配置多个项目种方式: nginx按不同的目录...
  • nginx部署vue项目

    万次阅读 多人点赞 2019-03-18 17:13:19
    今天由于公司需求,需要在同一域名端口下,部署两个项目;今天花了一上午终于弄好了,选择赶紧做一个笔记。 如何连接阿里云服务器就不在这里说了,请看我以前的文章。 首先需要的效果 http://47.97.244.83/login ...
  • nginx部署Vue项目

    千次阅读 2019-08-01 10:16:31
    自己做的移动端,其他人做的pc端,要求部署到一起,个人研究了一下午,参考各路大神方案,做了一个,如有错误,请指正。 下载nginx压缩包并解压... 我在本次中将html原有的两个文件删除掉了;多个项目依次增加。 ...
  • nginx 部署前端项目

    千次阅读 2020-05-22 15:23:50
    NGINX中单设置一web前端很容易,改变端口,改变root指向基本就搞定了,那么,假设我们有多前端项目部署在同一域名下,该怎么设置呢? 1. 先假设我们有一应用,http://domain就可以访问了, 现在改版了希望...
  • tomcat+nginx部署个项目相关配置

    千次阅读 2018-08-31 10:46:16
    有时申请不下公司服务器资源,那就只能将就一下挤一挤了,生产、测试环境等多个项目部署在同一服务器; 无需安装多个ngin,修改nginx配置文件即可,Linux路径:/usr/local/nginx/conf/nginx.conf 代码里,有三个...
  • Nginx部署Vue项目,配置二级域名
  • 使用nginx部署前端项目 个人总结了3种方法来实现在一台服务器上使用nginx部署前端项目的方法。 基于域名配置 基于端口配置 基于location配置 在正式开始之前,我们先来看一下nginx安装的...
  • Nginx部署JavaWeb项目

    千次阅读 2019-10-18 14:08:28
    什么是Nginx2.Nginx 架构3.Nginx部署JavaWeb项目4.通过二级域名部署JavaWeb项目5.通过不同路径方式部署JavaWeb项目6.补充: 1.什么是Nginx Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)...
  • nginx部署https项目

    千次阅读 2019-02-26 15:38:14
    server { listen 443; server_name localhost; ssl on; root html; index index.html index.htm; ssl_certificate cert/214980223120935.pem; ssl_cert...
  • Nginx部署Vue项目种防止404配置 背景:前后端分离使用Nginx部署Vue项目,Nginx是基于alpine打出的基础Nginx镜像 一、配置方式1 location /projectname { root /usr/share/nginx/html/; index index....
  • nginx 部署 yii2项目

    千次阅读 2019-06-20 10:25:37
    1.Linux 添加虚拟主机...2.更新配置文件,修改你自己的.conf文件,比如a.conf,我的是在 /usr/local/nginx/conf/vhost/目录下,然后添加 location / { # Redirect everything that isn't a real file to index.php...
  • nginx 部署vue项目, 静态资源404 1: 路由配置 const RouterConfig = { base: '/aa/', mode: 'history', routes: [ ... ] }; 2: vue.config.js配置 module.exports = { publicPath: '/aa/', devServer: ...
  • nginx部署vue项目如何配置

    千次阅读 2020-10-22 15:00:02
    使用同一域名或者ip去部署访问多个前端项目,比如域名/ip直接访问官网,域名/ip后面带路径去访问其它项目 ...注:http://192.168.27.119/login 这个项目无需配置路径,直接打包即可。下面以项目二,通过/bi
  • nginx上面部署个项目

    万次阅读 2018-11-01 10:55:12
    在网上搜了一下,一般有种方法,第一种方法:在一配置文件里面操作,把多域名写在一配置文件里面,第二种方法:一域名对应一配置文件,我是按照第二种方法操作的。比如在一服务器上面,需要配置的域名...
  • nginx部署vue项目的2种方法

    千次阅读 2020-07-06 15:58:40
    第一种 同一个域名或者ip 相同端口号 部署个项目 通过斜线访问 http://10.16.xx.23/student/ http://10.16.xx.23 先看这2种配置 查找nginx 和配置文件 whereis nginx 查看配置文件 vim nginx.conf ...
  • docker nginx部署前端项目

    千次阅读 2020-05-30 18:26:02
    最近一直在搞前后端分类,一直在想前端的html页面应该用什么部署 想来想去,如果用tomcat好像有点浪费资源,作为...我们来利用docker来部署nginx项目 首先我们假设docker 安装成功,并且也获取了nginx镜像,如果
  • nginx部署vue项目

    千次阅读 2021-08-04 20:21:54
    文章目录前言启动nginx服务部署Vue项目1 部署到根目录1)vue配置2)nginx配置及部署3)路由模式及地址匹配history模式hash模式2 部署到子目录1) vue配置2)nginx配置 前言 nginx是一高性能的HTTP和反向代理web...
  • 最近看了看nginx,觉得挺好玩,刚好自己有一个VPN测试服务器,就自己敲了一遍,部署一个vue-cli初始化项目 ~另外给大家推荐一个免费试玩的服务器腾讯云☁️实验室,每天有大约6个小时的时间可以使用,两个ubuntu,一...
  • nginx部署vue项目概览

    万次阅读 多人点赞 2018-03-08 11:55:45
    今天要用到服务器nginx,还需要把自己的vue的项目部署到服务器上去所以就写一下记录下来。首先要去nginx官网下下载nginx: 下载地址:https://nginx.org/en/download.html 下载下来会是一解压包,解压到你想放...
  • 安装nginx 1.安装编译工具及库文件 yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel pcre-devel gcc、gcc-c++ # 主要用来进行编译相关使用 openssl、openssl-devel # 一般当配置https...
  • 使用nginx部署vue-cli项目

    千次阅读 2018-06-30 05:47:15
    使用nginx部署vue-cli项目 本文介绍种部署方法,一种是直接在物理机上部署,另一种是通过docker部署 ubuntu16.04使用nginx部署vue-cli 1. 安装nginx sudo apt-get install nginx 这样安装nginx后,配置...
  • Linux下nginx部署vue项目

    2020-12-29 13:22:25
    文章目录一、Nginx安装二、vue项目配置 一、Nginx安装 种方式 1、下载nginx,然后移动到/usr/local 下 nginx下载地址:https://nginx.org/download/ 2、yum下载 安装依赖包 yum -y install gcc zlib zlib-devel ...
  • 利用nginx部署vue项目过程记录

    千次阅读 2020-09-24 17:06:32
    不是重点,可以忽略: 本人 七月的胜利。代表七月份我出生啦,嘻嘻 ...指向nginx另外新建的一文件 vue项目存放地址 检查配置文件 [root@dowin-marking-colud02 sbin]# ./nginx -t 重启nginx服务 [r.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 93,412
精华内容 37,364
关键字:

nginx部署两个项目