Nuxt3用nginx部署到二级目录

news2024/12/23 8:46:19

有的时候我们需要把我们写的Nuxt3项目部署到域名的二级目录，例如：https://abc.xx.com/abc/目录下。主要就是用nginx进行配置代理转发来实现的，这样可以实现我们同一个域名下可以部署多个Nuxt3独立的项目，只不过端口不同。使用nginx进行配置代理转发即可。

一、Nuxt3前端配置

首先看下Nuxt3的前端部分的配置（nuxt.config.ts）：

//主要就是配置个baseURL（配置成你要部署的二级目录名称）

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  app: {
    baseURL:'/calculator3/',
    head: {
      title: '计算器-小工具',
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
      meta: [
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        {
          hid: 'description',
          name: 'description',
          content: '计算器-小工具',
        },
      ],
      link: [{ rel: 'icon', type: 'image/x-icon', href: './favicon.ico' }],
    }
  },
  modules: [
    '@element-plus/nuxt',
    '@nuxtjs/color-mode'
  ],

  elementPlus: {
    icon: 'ElIcon',
    // importStyle: 'scss',
    // themes: ['dark'],
  },
  colorMode: {
    preference: 'system', // default value of $colorMode.preference
    fallback: 'light', // fallback value if not system preference found
    hid: 'nuxt-color-mode-script',
    globalName: '__NUXT_COLOR_MODE__',
    componentName: 'ColorScheme',
    classPrefix: '',
    classSuffix: '',//-mode
    storageKey: 'nuxt-color-mode'
  }
});

二、Nuxt3打包

运行命令打包项目：

npm run build

三、上传服务器并部署运行

 将打包后的.output目录文件上传到服务器对应二级目录下面。同时将pm2的脚本文件ecosystem.config.js上传。

 ecosystem.config.js内容：

module.exports = {
    apps: [
      {
        name: 'calculator3',
        port: '9060',//自定义的端口
        exec_mode: 'cluster',//cluster  fork
        instances: 'max',//max 1
        script: './server/index.mjs'
      }
    ]
  }

运行启动项目，使用pm2部署运行服务：

pm2 start ecosystem.config.js

停止项目服务命令：

pm2 stop ecosystem.config.js

此时就可以通过http://ip:端口 来访问项目了。

四、nginx配置跳转代理


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/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;

    server {
        listen       80;
        server_name  abc.xx.com;
		#index index.php index.html index.htm default.php default.htm default.html;
		#autoindex on;    自动索引
        #charset koi8-r;
		root   html;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
		
		location /calculator3/ {
            proxy_pass http://xxx.x.x.x:9060;
        }

        #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;
        }
    }


    # 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;
    #    }
    #}

}

核心nginx跳转配置就是下面这句（端口映射）：

location /calculator3/ {
    proxy_pass http://xxx.x.x.x:9060;
}

静态资源目录匹配（可加可不加）：

location ~ /calculator3\/.*\.(js|ts|css|json|png|ttf|otf|jpg)$ {
   root '打包后静态资源的根目录';
}

如果遇到资源404报错，可以把上面的配置加上。或者删除下面这段：

    location ~ .*\.(js|css)?$
    {
        expires      12h;
        error_log off;
        access_log off; 
    }

或改成：

    location ~ .*\.(js|css)?$
    {
    	root '项目资源根目录';
        expires      12h;
        error_log off;
        access_log off; 
    }

此时你访问：https://abc.xx.com/calculator3/，就会访问到我们部署到9060端口的Nuxt3项目了。上CDN也不影响。

五、扩展（windows本地安装nginx并部署测试项目）

1、下载nginx

官网下载地址：https://nginx.org/en/download.html

 下载后，解压到任意文件夹里。

 其中html目录用于部署放置我们的项目。

 2、启动nginx

cmd 进入nginx文件夹，执行命令：

start nginx

打开浏览器，输入：http://localhost:80 出现以下页面即为启动成功。

 3、部署项目

部署项目就是部署在html目录中。

 4、编写nginx配置

nginx配置说明：
1、listen：端口号
2、server_name：虚拟ip地址
3、root：声明默认网站根目录位置 --项目的根目录
4、index：定义首页索引文件的名称 --index.html
5、try_files：$uri $uri/ /app/index.html; 这里的设置是通过内部重定向的方式，去匹配目录下的索引文件index.html
6、location：控制服务访问路径
7、proxy_pass：请求代理转发


//具体配置内容如下

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/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;

    server {
        listen       80;
        server_name  localhost;
		#index index.php index.html index.htm default.php default.htm default.html;
		#autoindex on;    自动索引
        #charset koi8-r;
		root   html;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
		
		location /calculator3/ {
            proxy_pass http://127.0.0.1:9060;
        }

        #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;
    #    }
    #}

}

 5、重启nginx使配置生效

进入nginx文件夹，执行命令：

nginx -s reload

这样最新更改的配置就会立即生效了。

配置后的效果：

 6、nginx常用命令

//启动nginx
start nginx

//关闭停止nginx
nginx -s stop

//修改重启nginx使配置生效
nginx -s reload

//重新打开日志文件
nginx -s reopen

//测试nginx配置文件是否正确
nginx -t -c /xxx/xx/nginx.conf

//正常停止nginx服务（即处理完所有请求后再停止服务）
nginx -s quit

//查看nginx版本号等信息
nginx -v

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/446969.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Node【Global全局对象】之【Buffer】

Node【Global全局对象】之【Buffer】

文章目录 🌟前言🌟Buffer🌟Buffer介绍🌟Buffer对象：类似于数组，其元素是16进制的两位数。🌟什么时候用Buffer🌟Buffer的转换🌟Buffer使用🌟创建Buffer&#x…
阅读更多...
uniapp 来电显示悬浮窗插件（支持锁屏来电） Ba-CallerID

uniapp 来电显示悬浮窗插件（支持锁屏来电） Ba-CallerID

简介（下载地址） Ba-CallerID 是一款来电显示悬浮窗插件插件。 支持显示、隐藏支持锁屏来电显示支持自定义位置显示（上、中、下）支持拖动（这版不支持，需要的话可以加）支持申请、判断悬浮窗权限…
阅读更多...
3个实用的文字转语音方法，让你时刻保持信息更新！

3个实用的文字转语音方法，让你时刻保持信息更新！

现在，我们生活节奏加快，信息量也越来越大，有时候想了解新闻却又不想眼睛再去盯着手机屏幕了，这时候文字转语音工具就可以帮助我们实现听新闻的需求。如果你还不了解文字如何转换成语音，别担心，今天我将向大…
阅读更多...
JavaSE注解和反射

JavaSE注解和反射

注解分类和说明点 注解：可对程序做解释可被其他程序读取 元注解：Target：表明注解的使用范围，Retention：表示要在什么级别保存注解信息，Document，Inherited 自定义注解：interface …
阅读更多...
P1027 [NOIP2001 提高组] Car 的旅行路线

P1027 [NOIP2001 提高组] Car 的旅行路线

题目描述 又到暑假了，住在城市 A 的 Car 想和朋友一起去城市旅游。 她知道每个城市都有 44 个飞机场，分别位于一个矩形的 44 个顶点上，同一个城市中两个机场之间有一条笔直的高速铁路，第 �i 个城市中高速铁路了的单位…
阅读更多...
【let变量声明以及声明特性】

【let变量声明以及声明特性】

let变量声明以及声明特性 1 let变量声明2 let声明特性3 let经典案例实践 1 let变量声明 <script>// 声明变量let a;let b,c,d;let e 100;let f 521, g iloveyou, h [];</script>2 let声明特性 1> 变量不能重复声明2> 块级作用域、全局作用域、函数作用域…
阅读更多...
4.5 函数最佳逼近

4.5 函数最佳逼近

学习目标&#xff1a; 要学习函数最佳逼近&#xff0c;我可能会采取以下几个步骤&#xff1a; 学习基本的数学知识和工具&#xff1a;函数最佳逼近涉及到线性代数、实变函数、泛函分析等多个领域的知识&#xff0c;因此我需要先学习这些基础知识和工具&#xff0c;例如矩阵和向…
阅读更多...
论文各子结构的实现

论文各子结构的实现

本文将简明介绍人工智能论文各子结构的实现方法&#xff0c;重点指出了各部分实现时的要点&#xff0c;帮助读者高效地完成论文的写作。 1. 标题 论文标题的确定必须遵循明确而有吸引力的原则。论文的题目需要准确反映自己论文的研究内容和创新点&#xff0c;同时还必须具有吸…
阅读更多...
嵌入式软件中常见的 8 种数据结构详解

嵌入式软件中常见的 8 种数据结构详解

目录 第一&#xff1a;数组 1、数组的应用 第二&#xff1a;链表 1、链表操作 2、链表的应用 第三&#xff1a;堆栈 1、堆栈操作 2、堆栈的应用 第四&#xff1a;队列 1、队列操作 2、队列的应用 第五&#xff1a;哈希表 1、哈希函数 2、哈希表的应用 第六&#…
阅读更多...
chatgpt智能提效职场办公-ppt怎么设置背景图片

chatgpt智能提效职场办公-ppt怎么设置背景图片

作者&#xff1a;虚坏叔叔 博客&#xff1a;https://xuhss.com 早餐店不会开到晚上&#xff0c;想吃的人早就来了&#xff01;&#x1f604; 在 Microsoft PowerPoint 中&#xff0c;可以按照以下步骤设置背景图片&#xff1a; 打开 PowerPoint 文档并进入“设计”选项卡。 在…
阅读更多...
HJY系列数字式交流电压继电器（数显型） 导轨安装 约瑟JOSEF

HJY系列数字式交流电压继电器（数显型） 导轨安装 约瑟JOSEF

1 用途 HJY系列数字式交流电压继电器为瞬时动作特性&#xff0c;用于发电机&#xff0c;变压器&#xff0c;输电线路的继电保护装 置中作为过压或欠压的闭锁启动元件。 安装结构 导轨安装9&#xff0c;导轨安装E两种结构方式&#xff0c;具体尺寸请参考外型尺寸图。特点 (1). …
阅读更多...
1小时学会CSS-下

1小时学会CSS-下

今天给大家分享的内容包含CSS 盒子模型&#xff0c;CSS 标准布局&#xff0c; CSS 浮动布局 &#xff0c; 并以案列进行详细说明。 一、CSS 盒子模型 CSS 将所有元素都当成盒子&#xff0c;CSS布局其实就是如何堆放盒子。 组成: content(内容)—>padding(内边距)—>bor…
阅读更多...
【python视图1】networkx操作图

【python视图1】networkx操作图

一、说明 数据可视化需要显示种种数据&#xff0c;matplotlib负责曲线类画图&#xff0c;然而类似于图论的操作用什么方法。这里用networkx程序包完成。本文专门介绍这种程序包的用法。 二、生成图&#xff08;Creating a graph&#xff09; 2.1 创建一个没有节点和边的空图。…
阅读更多...
C++进阶——二叉搜索树BST

C++进阶——二叉搜索树BST

C进阶——二叉搜索树BST 其实应该是二叉树内容的进阶版本&#xff1a; 二叉树在前面C数据结构阶段已经讲过&#xff0c;本节取名二叉树进阶是因为&#xff1a; map和set特性需要先铺垫二叉搜索树&#xff0c;而二叉搜索树也是一种树形结构二叉搜索树的特性了解&#xff0c;有…
阅读更多...
十七、WLAN概述

十七、WLAN概述

文章目录 前言一、WLAN 网络演化过程二、IEEE 802.11主要标准三、WLAN 解决方案四、模拟器登录AC1、配置AC2、配置云3、登录 前言 无线局域网WLAN&#xff08;Wireless Local Area Network&#xff09;是一种利用无线技术实现主机等终端设备灵活接入以太网的技术&#xff0c;它…
阅读更多...
hadoop集群部署常见问题解决

hadoop集群部署常见问题解决

1、权限 •Permission denied&#xff08;权限被拒绝&#xff09; Hadoop的运行日志在$HADOOP_HOME/logs内 也可以查看日志排错 只要出现Permission denied就是权限问题 hadoop安装文件夹或/data文件夹&#xff0c;未被授权给hadoop用户&#xff0c;所以无权限操作 2、环境变…
阅读更多...
在金融领域使用机器学习的 9个技巧

在金融领域使用机器学习的 9个技巧

机器学习已经倍证明可以预测结果和发掘隐藏的数据模式。但是必须小心使用&#xff0c;并遵循一些规则&#xff0c;否则就会在数据的荒野中徘徊而无所获。使用机器学习进行交易的道路充满了陷阱和挑战&#xff0c;只有那些勤奋认真地遵循规则的人才能从中获得收益。下面是一些技…
阅读更多...
如何建立到NAS中新增容器的ssh连接

如何建立到NAS中新增容器的ssh连接

注&#xff1a;首先需按照教程建立Zerotier连接&#xff0c;然后进入新建的nginx镜像&#xff0c;为root用户建立密码。 查看容器类型 Debian 系镜像: cat /etc/issue Redhat 系镜像: cat /etc/redhat-release Alpine 系镜像: cat /etc/os-release 安装并启动ssh apt-get …
阅读更多...
SHELL环境变量和引用

SHELL环境变量和引用

目录 1、判断当前磁盘剩余空间是否有20G&#xff0c;如果小于20G&#xff0c;则将报警邮件发送给管理员&#xff0c;每天检查一次磁盘剩余空间。 a.安装邮件服务 b.创建脚本对要求进行设计 c.编辑配置文件 ​编辑d.做计划任务 ​编辑 e.进行测试 2、判断web服务是否运行…
阅读更多...
POLARDB 从一个使用者的角度来说说，POALRDB 怎么打败 MYSQL RDS

POLARDB 从一个使用者的角度来说说，POALRDB 怎么打败 MYSQL RDS

开头还是介绍一下群&#xff0c;如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;在新加的朋友会分到2群&#xff08;共…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023