uniApp打包H5发布到服务器(docker)

        使用docker部署uniApp打包后的H5项目记录,好像和VUE项目打包没什么区别...

用HX打开项目,首先调整manifest.json文件

开始用HX打包

填服务器域名和端口号~

打包完成后可以看到控制台信息

我们可以在web文件夹下拿到下面打包好的静态文件

用FinalShell或者XShell远程连接工具连接服务器

         默认服务器已经配好docker环境和防火墙。然后随便找个位置建文件夹,并配置docker部署等文件~,下面是部署前的文件夹

dist 项目打包文件夹,把HX打包得到的web文件夹里的所有文件复制到里面。

default.conf Nginx配置文件,构建容器时挂载到容器中

upstream my_server{server xxxxxxxxx; # 后端server 地址keepalive 2000;
}server {listen       80; #这里的端口号不要动,80端口指的是容器的端口,最后我们会将容器的端口映射到我们宿主服务器的端口,比如映射到8888端口server_name  xxxxxxxxx; # 修改为docker服务宿主机的ip/域名#charset koi8-r;access_log  /var/log/nginx/host.access.log  main;error_log  /var/log/nginx/error.log  error;location / {root   /usr/share/nginx/html;index  index.html index.htm;try_files $uri $uri/ /index.html =404;}#  这里就是和vue本地代理的意思一样,已api开头的路径都代理到本机的3000端口location /api/ {proxy_pass http://my_server/api;proxy_set_header Host $host:$server_port;rewrite ^/api/(.*) /$1 break;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}

Dockerfile 容器构建文件

# 使用NGINX作为基础镜像
FROM nginx# 复制解压后的网站文件到NGINX默认路径下
COPY dist/ /usr/share/nginx/html/
# 将你的 NGINX 配置文件复制到容器中的 NGINX 配置目录
COPY default.conf /etc/nginx/conf.d/default.conf

set.sh 启动脚本

docker build -t test-app.docker run -d -p 9000:80 --name test-app test-app

最后运行./ set.sh

最后打开浏览器输入域名(IP) + 端口号

搞定~

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【es6复习笔记】rest参数(7)

什么是 rest 参数? rest 参数是 ES6 引入的一个特性,它允许我们将一个不定数量的参数表示为一个数组。使用 rest 参数可以更方便地处理函数的参数,尤其是在参数数量不确定的情况下。 如何使用 rest 参数? 在函数定义中&#xf…

项目实战——高并发内存池

一.项目介绍 本项目——高并发内存池,是通过学习并模仿简化 google 的一个开源项目 tcmalloc ,全称 Thread-Caching Malloc,即线程缓存的malloc,模拟实现了一个自己的高并发内存池,用于高效的多线程内存管理&#xff…

Apache Log4j漏洞复现

所用环境 宝塔云服务器 log4j2 是Apache的⼀个java日志框架,我们借助它进行日志相关操作管理,然而在2021年末log4j2爆出了远程代码执行漏洞,属于严重等级的漏洞。 apache log4j通过定义每⼀条日志信息的级别能够更加细致地控制日志⽣成地过…

自动驾驶控制算法-横向误差微分方程LQR前馈控制

本文是学习自动驾驶控制算法第六讲 前馈控制与航向误差以及前两节的学习笔记。 1 横向误差微分方程 以规划的轨迹作为自然坐标系,计算自车在轨迹上的投影点,进而计算误差: 如图所示,横向误差为 d d d,航向误差为 θ…

Apache RocketMQ 5.1.3安装部署文档

官方文档不好使,可以说是一坨… 关键词:Apache RocketMQ 5.0 JDK 17 废话少说,开整。 1.版本 官网地址,版本如下。 https://rocketmq.apache.org/download2.配置文件 2.1namesrv端口 在ROCKETMQ_HOME/conf下 新增namesrv.pro…

Google Cloud Kubernetes Anthos是什么,和Istio有什么关联

Google Cloud Platform (GCP) Kubernetes Anthos 是 Google 推出的一种多云管理平台,基于 Kubernetes,旨在帮助企业在多个云环境中管理和运行容器化应用程序。 https://cloud.google.com/blog/topics/hybrid-cloud/5-frequently-asked-questions-about-…

多摩川编码器协议

多摩川编码器是一种常用的绝对值编码器,其协议基于485硬件接口的标准NRZ协议,通讯波特率为固定的2.5Mbps。以下是多摩川编码器协议的详细说明: 硬件接口 多摩川编码器使用RS485接口进行通信,接口定义如下: 5V供电&…

AI新书推荐:深度学习和大模型原理与实践(清华社)

本书简介 在这个信息爆炸、技术革新日新月异的时代,深度学习作为人工智能领域的重要分支,正引领着新一轮的技术革命。《深度学习和大模型原理与实践》一书,旨在为读者提供深度学习及其大模型技术的全面知识和实践应用的指南。 本书特色在于…

redis延迟队列

Redis延迟队列 Redis延迟队列是基于Redis构建的消息队列,用来处理需延迟执行的任务。 基本原理 它借助Redis的有序集合(Sorted Set)数据结构达成目的。会把任务及其执行时间分别当成成员与分值存进有序集合,由于执行时间作为分值…

Android 之 List 简述

一、简单创建方式 Android 开发中&#xff0c;列表有很多种类&#xff0c;如ArrayList、LinkedList、List、MutableList等&#xff0c;创建列表的方式如下所示&#xff1a; fun listDemo() {// 使用 listOf 创建不可变的空列表val list listOf<Int>()val list1 listOf…

webrtc音频模块(三) windows Core Audio API及声音的播放

在前面介绍了ADM(Audio Device Module)&#xff0c;它用于抽象音频设备管理和音频数据采集/播放接口。windows的实现是AudioDeviceWinowCode&#xff0c;它封装了Core Audio APIs实现了对音频设备的操作。 Core Audio APIs windows提供了多种音频操作API&#xff0c;比如最常…

微信小程序页面之间的传值方式

在微信小程序的开发过程中&#xff0c;页面之间的传值是一个常见的操作。根据多年的实践&#xff0c;我就我所知道的小程序页面之间的传值方式&#xff0c;进行简单的总结。希望能够帮助大家。 一、URL参数传递 原理 这种方式类似于网页开发中的URL传参。在微信小程序中&…

cursor保存更改操作技巧

1. 当我们在agent模式时&#xff0c;要求cursor更改代码时&#xff0c;cursor回答后&#xff0c;就已经更改了代码了&#xff0c;这时候就可以对程序进行编译和测试&#xff0c; 不一定先要点” accept“, 先测试如果没有问题再点“accept”&#xff0c;这样composer就会多一条…

运维工程师面试系统监控与优化自动化与脚本云计算的理解虚拟化技术的优点和缺点

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c; 忍不住分享一下给大家。点击跳转到网站 学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……&#xff09; 2、学会Oracle数据库入门到入土用法(创作中……&#xff09; 3、手把…

各种网站(学习资源及其他)

欢迎围观笔者的个人博客~ 也欢迎通过RSS网址https://kangaroogao.github.io/atom.xml进行订阅~ 大学指南 上海交通大学生存手册中国科学技术大学人工智能与数据科学学院本科进阶指南USTC不完全入学指南大学生活质量指北科研论 信息搜集 AI信息搜集USTC飞跃网站计算机保研 技…

2.在 Vue 3 中使用 ECharts 实现动态时间轴效果

在前端开发中&#xff0c;时间轴&#xff08;Timeline&#xff09;是一种常见且有效的方式来展示时间相关的数据。在本篇文章中&#xff0c;我们将展示如何在 Vue 3 项目中使用 ECharts 创建一个具有动态时间范围的时间轴&#xff0c;并添加了今日时间的标记以及通过按钮来前进…

uniapp-微信小程序调用摄像头

1.uniapp中的index.vue代码 <template><view class"content"><view class"container"><!-- 摄像头组件 --><camera id"camera" device-position"front" flash"off" binderror"onCameraErr…

uni-app开发收货地址管理

目录 一:功能描述 二:功能实现 一:功能描述 收货地址在个人中心的我的地址里面,点击我的地址可以查看我的收货地址列表,可以新增收货地址,点击特定收货地址可以编辑和删除该地址信息。 二:功能实现 1:收货地址列表 <view v-for="(item, index) in data_lis…

Android修行手册 - 移动端几种常用动画方案对比

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

Java日志框架:log4j、log4j2、logback

文章目录 配置文件相关1. properties测试 2. XMl使用Dom4j解析XML Log4j与Log4j2日志门面 一、Log4j1.1 Logges1.2 Appenders1.3 Layouts1.4 使用1.5 配置文件详解1.5.1 配置根目录1.5.2 配置日志信息输出目的地Appender1.5.3 输出格式设置 二、Log4j22.1 XML配置文件解析2.2 使…