windows系统docker中将vue项目网站部署在nginx上

news2024/9/25 3:22:27

一、首先在windows系统上下载并安装docker,要下载windows版本

https://www.docker.com/products/docker-desktop/

PS:安装过程中需要WSL,我的是win11系统,直接提示了我安装就可以下一步了。其他windows系统版本我不知道是否需要单独安装。

安装完成docker后运行效果如下(可以在官网注册账号):

二、接下来的步骤咱们尽量不用命令(因为是windows嘛,全部图形化操作),在docker这个应用程序中安装nginx

搜索nginx关键字,然后最好选择刀客团队发布的,最新版,更安全和稳定。如果没有可以选第三方发布的,用量比较大的。点击后面那个Pull,等待获取完成就算安装完了。

三、此时可以运行nginx镜像,生成一个应用容器了。

填写相关信息这里是个坑,如果你点击docker程序提供的选择路径按钮,将来运行会出错,提示找不到路径,所以得按如下的双斜杠形式填写:

1.宿主机default.conf路径  :

C:\\Users\\mingyong.huang\\Desktop\\local\\default.conf

2.nginx运行时路径(即 default.conf),这里不明白是什么意思,去查一下nginx使用方法,这个路径基本都是固定的:

/etc/nginx/conf.d/default.conf

3.宿主机网站文件路径(即:是你的vue项目被编译后的网站静态文件存放路径):

C:\\Users\\mingyong.huang\\Desktop\\www\\site1\\dist

4.nginx运行时路径(即 nginx运行网站的静态文件路径),也是固定的,同理,不懂去查一下nginx使用方法:

/usr/share/nginx/html

PS:至于网上有说什么nginx运行时还有个 /etc/nginx.conf需要配置,这次我没有用到也可以正常运行!此处咱们先不管它,等后期用到再说。

最后点击run按钮,大功告成!看下成果吧!

此时你就能看到生成的容器了,按照此方法,你想生成多少个容器都可以。是不是比虚拟机更轻量级,你还可以pull更多的应用,比如redis、mysql等等。

完美运行网站!

PS:vue项目如果用的history模式(而不是hash模式),直接F5刷新页面会报错404,解决办法就是在default.conf文件加一句话即可,try_files  $uri  $uri/  /index.html;

这个文件我是放在C:\\Users\\mingyong.huang\\Desktop\\local\\default.conf的嘛,所以打开后编辑保存,重启此容器即可。

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        # 避免f5刷新后404..
        try_files  $uri  $uri/  /index.html;
    }

    #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   /usr/share/nginx/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;
    #}
}

全部完毕!

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

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

相关文章

宠物行业如何进行软文营销

如今,宠物已经成为了人们生活中不可或缺的一部分,大众对于萌宠的喜爱与日俱增,随着“萌宠经济”升温,越来越多的商机开始出现,伴随着宠物市场竞争的日益激烈,宠物行业的营销光靠硬广告很难吸引受众&#xf…

关于MyBatisPlus框架下出现xml里面定义的方法无法被正确识别以及提示调用mysql存储过程时参数无效的问题

第一个问题:xml里面明明定义了方法A,但是通过IService接口调用A的时候,总提示无法将接口中定义的函数绑定到xml中的同名方法中(“Invalid bound statement (not found): com.aircas.sqlservice.mapper.SysTempIndexMapper.getRemo…

【数据分享】2006-2021年我国城市级别的道路、桥梁、管线建设相关指标(10多项指标)

《中国城市建设统计年鉴》中细致地统计了我国城市市政公用设施建设与发展情况,在之前的文章中,我们分享过基于2006-2021年《中国城市建设统计年鉴》整理的2006—2021年我国城市级别的市政设施水平相关指标、2006-2021年我国城市级别的各类建设用地面积数…

链动2+1天天秒商城商业模式

链动21天天秒商城商业模式 在当今市场,一种名为链动21天天的秒杀商城商业模式正在引发广泛关注。这种创新的商业模式具有快速拓展市场的强大能力,让许多用户和商家都感到非常惊讶。那么,这种模式究竟是什么,它又为何具有如此大的…

【开发】视频云存储/安防监控/AI分析/视频AI智能分析网关:垃圾满溢算法

随着我国科技的发展和城市化进程加快,大家对于生活环境以及空气质量更加重视,要求越来越严格。城市街道垃圾以及生活区垃圾满溢已经成为城市之痛。乱扔垃圾,垃圾不入桶这些行为已经严重影响到了城市的美化问题。特别是炎热的夏日和雨水季节&a…

代码优化工具-测试程序执行时间-IDEAdebug+StopWatch

参考: [技巧]IDEA的debugStopWatch监测程序运行时间 添加链接描述 1创建类StopWatchExpand import lombok.extern.slf4j.Slf4j;import org.springframework.util.StopWatch;import java.text.NumberFormat;/*** 检测程序片段运行时间拓展** author sdevil507* cr…

分享一个基于springboot+vue的在线租房与招聘平台系统代码 房屋租赁系统

💕💕作者:计算机源码社 💕💕个人简介:本人七年开发经验,擅长Java、Python、PHP、.NET、微信小程序、爬虫、大数据等,大家有这一块的问题可以一起交流! 💕&…

使用navicate快速将Excel中的数据导入到数据库

表名称上右键,导入向导 这种方式速度还是很快的,18万条数据,3分钟左右就导入进去了。

基于人人开源脚手架快速开发的一个图书馆管理系统,功能强大,安全好用。

概述 基于人人开源脚手架快速开发的一个图书馆管理系统,功能强大,安全好用。 详细 项目简介 前后端分离版的图书馆管理系统。基于人人开源开发脚手架,简化开发提升开发速度。支持下载word催还单 效果显示 【登录】 管理员/普通用户 &am…

示波器电流探头消磁如何正确操作

示波器电流探头是测量电路中电流的重要工具。由于频繁使用和磁场的影响,电流探头经常会受到磁化影响,从而影响测量的准确性。消磁是保证探头测量精度的必要步骤。 磁化是指物体在外磁场作用下,内部磁性微观区域重新排列并形成剩余磁场的过程…

【CUDA OUT OF MEMORY】【Pytorch】计算图与CUDA OOM

计算图与CUDA OOM 在实践过程中多次碰到了CUDA OOM的问题,有时候这个问题是很好解决的,有时候DEBUG一整天还是头皮发麻。 最近实践对由于计算图积累导致CUDA OOM有一点新的看法,写下来记录一下。包括对计算图的一些看法和一个由于计算图引发…

小商户记账系统企业财务管理系统 uniapp微信小程序

本文以实际运用为开发背景,运用软件工程原理和开发方法,它主要是采用java语言,应用ssm框架, MySQL为后台数据库。来完成对系统的设计。整个开发过程首先对小商户记账系统进行需求分析。 小商户记账系统小程序主要是为了提高用户…

炫酷的开关--20230907

Night && Day Toggle ☀️/&#x1f319; [Completed It!] HTML&#xff1a; <div class"controls"><label for"sync">Sync <body></label><input id"sync" type"checkbox"/> </div> &l…

四川玖璨电子商务有限公司:抖店怎么运营爆款

如今&#xff0c;随着网络的普及和电商平台的兴起&#xff0c;越来越多的人开始关注和尝试开设自己的网店。然而&#xff0c;在面对激烈的市场竞争中&#xff0c;如何让自己的抖店脱颖而出&#xff0c;成为爆款产品的运营者&#xff0c;是每个抖店经营者迫切需要解决的问题。 …

[PG]将一行数据打散成多行数据

原始数据 比如有如此表结构定义: 假如查询数据如下&#xff1a; select dt as "日期",bj_count as "北京", sh_count as "上海",gz_count as "广州", sz_count as "深圳" from city_stats order by dt--------------------…

Linux密码遗忘?别慌!解锁你的系统小秘籍!

很多朋友经常会忘记Linux系统的root密码&#xff0c;linux系统忘记root密码的情况该怎么办呢&#xff1f;重新安装系统吗&#xff1f;当然不用&#xff01;进入单用户模式更改一下root密码即可。 步骤如下&#xff1a; 重启linux系统 3 秒之内要按一下回车&#xff0c;出现如…

基于Java+SpringBoot+Vue前后端分离在线互动学习网站设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

LeetCode寻找两个有序数组的中位数打败100%人

&#x1f600;前言 在本文中&#xff0c;我们将深入研究一种复杂的算法问题&#xff1a;查找两个有序数组的中位数。这是一个经典的计算问题&#xff0c;通常出现在编程面试和算法挑战中。我们将首先探讨一种常见的暴力解决方法&#xff0c;然后逐步引入更高效的解决方案&#…

外滩大会今日开幕 生成式AI成为热议话题

2023 Inclusion外滩大会9月7日在上海黄浦世博园正式开幕。这场以“科技创造可持续未来”为主题的大会为期三天&#xff0c;近20位“两院”院士、诺贝尔奖和图灵奖得主&#xff0c;全球超500位有影响力的科技领军企业和专家学者&#xff0c;将在此带来一场科技、人文和产业的思想…

第5章 驱动模块传参实验(iTOP-RK3568开发板驱动开发指南 )

经过前两章实验的实战操作&#xff0c;我们已经完成最简单的helloworld驱动实验和模块驱动实验&#xff0c;加载模块可以使用“insmod”函数&#xff0c;使用“insmod”函数进行模块加载时也能进行参数的传递。运用得当可以极大提升内核测试速度。本节就来学习一下如何进行驱动…