docker启动前端

news2024/9/24 11:21:07

docker启动前端

作为一个前端,代码写完,最后部署到服务器,这是一个必须要了解的过程,今天,我就在docker 中安装nginx 并部署做一个简单的笔记。

首先我在某云中有个云服务器,并登陆

format,webp.png


前言

提示:我服务器装的是Linux的,要如何安装 Docker,要如何在Docker中安装 Nginx,请自己度一下。
安装Docker可以参考
在Docker中安装 Nginx可以参考

一、确认环境?

  1. 启动启动 Docker

登录后复制

sudo systemctl start docker

format,webp-16948573054993.png

  1. 查看是否已安装了 nginx:

登录后复制

docker images

format,webp-16948573083646.png

3. 安装完成后,我们可以使用以下命令来运行 nginx 容器:

登录后复制

docker run --name nginx-test -p 8080:80 -d nginx

–name nginx-test:容器名称。

-p 8080:80: 端口进行映射,将本地 8080 端口映射到容器内部的 80 端口。

-d nginx: 设置容器在在后台一直运行。

format,webp-16948573121909.png

如果出现这个就说明成功了,如果8080端口已经用了,可以用其他的端口

format,webp-169485731546712.png

返回的id后面要用到

二、在docker中部署nginx

1.创建如下文件:

登录后复制

mkdir -p ~/nginx/www ~/nginx/logs ~/nginx/conf

2.拷贝容器内 Nginx 默认配置文件到本地当前目录下的 conf 目录

登录后复制

sudo docker cp 容器的id:/etc/nginx/nginx.conf ~/nginx/conf

这个的容器id

format,webp-169485731943815.png

可以用这个命令去查看

登录后复制

docker ps

3.新启一个端口

登录后复制

sudo docker run -d -p 8082:80 --name 容器名称 -v ~/nginx/www:/usr/share/nginx/html -v ~/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v ~/nginx/logs:/var/log/nginx nginx 最上面返回的id

查看8082端口。看到如下,就说明成功了。

format,webp-169485732497318.png

4.在~/nginx/www 下就可以放前端打包构建的项目了,我这里用的是winSCP

format,webp-169485732733221.png

打开浏览器,访问服务器ip:8082就可以看大如下效果

format,webp-169485732996924.png


三、总结

以上都是自测可行的,仅仅作为笔记,不喜勿喷!。
可能会用到Docker start/stop/restart 命令,

  1. 启动已被停止的容器wgshtml-web

登录后复制

docker start wgshtml-web
  1. 停止运行中的容器wgshtml-web

登录后复制

docker stop wgshtml-web
  1. 重启容器容器wgshtml-web

登录后复制

docker restart wgshtml-web

后记:再开放一个8083的端口出来

  1. 第一步

登录后复制

docker run --name nginx-test -p 8080:80 -d nginx
  1. 第二步:查看id

登录后复制

docker ps
  1. 在当前目录建一个myReact的文件夹

登录后复制

mkdir -p ~/myReact/www ~/myReact/logs ~/myReact/conf
  1. 拷贝容器内 Nginx 默认配置文件到本地当前目录下的 conf 目录

登录后复制

sudo docker cp 87c589d190e1:/etc/nginx/nginx.conf ~/myReact/conf
  1. 启动

登录后复制

sudo docker run -d -p 8083:80 --name myreact -v ~/myReact/www:/usr/share/nginx/html -v ~/myReact/conf/nginx.conf:/etc/nginx/nginx.conf -v ~/myReact/logs:/var/log/nginx nginx

`dockerfile
sudo docker run -d -p 8083:80 --name myreact -v ~/myReact/www:/usr/share/nginx/html -v ~/myReact/conf/nginx.conf:/etc/nginx/nginx.conf -v ~/myReact/logs:/var/log/nginx nginx

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

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

相关文章

【2023研电赛】西北赛区二等奖:单链全导联便携式心脏健康监测系统

本文为2023年第十八届中国研究生电子设计竞赛技术竞赛类西北赛区二等奖分享,参加极术社区的【有奖活动】分享2023研电赛作品扩大影响力,更有丰富电子礼品等你来领!,分享2023研电赛作品扩大影响力,更有丰富电子礼品等你…

SQL性能优化

当你的数据里只有几千几万,那么 SQL 优化并不会发挥太大价值,但当你的数据里去到了几百上千万,SQL 优化的价值就体现出来了!因此稍微有些经验的同学都知道,怎么让 MySQL 查询语句又快又好是一件很重要的事情。要让 SQL…

Opencv 4.5.5 linux contrib编译

https://github.com/opencv/opencv/releases https://github.com/opencv/opencv_contrib/releases/tag/4.7.0 版本要一模一样 下载4.5.5的源码 # 0. 将contrib文件夹移动到opencv文件夹中去 mkdir build cd build# 1. cmake生成配置文件,其中OPENCV_EXTRA_MODUL…

内网桌面如何让外网电脑连接?快解析内网映射域名设置

异地电脑远程桌面连接局域网服务器需求场景时,大多人会想到在目标本地的路由器上做端口映射设置。其实路由映射方法只适用于有公网IP的网络环境。当所在联网环境下是内部网络,内网环境下无公网IP或无公网IP权限时,路由映射方法就不生效了&…

【谢希尔 计算机网络】第2章 物理层

目录 通信基础 基本概念 两个公式lim 奈氏准则 香农定理 奈氏准则 VS 香农定理 编码与调制 ​编辑 物理层下面的传输媒体 导引型传输媒体 1. 双绞线 2. 同轴电缆 3. 光缆 非导引型传输媒体 无线电微波通信 卫星通信 无线局域网使用的 ISM 频段 信道复用技术 …

RS485总线浪涌解决方案!|深圳比创达EMC

在各种通讯方式当中,RS485总线是较为常见的一种,因其接口简单、系统运行稳定和通讯速率高等特点被广泛应用。但由于RS485总线一般传输距离较长,且经常暴露在外,所以非常容易受到电磁干扰,而浪涌干扰已经成为485通信使用…

【漏洞复现】广联达OA漏洞合集(信息泄露+SQL注入+文件上传)

文章目录 声明广联达OA存在信息泄露一、漏洞概述二、漏洞复现三、修复建议广联达Linkworks办公OA SQL注入漏洞后台文件上传漏洞一、产品简介二、漏洞概述三、复现环境四、修复建议 声明 请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工…

无涯教程-JavaScript - MOD函数

描述 MOD函数返回数字除以除数后的余数。输出与除数的符号相同。 语法 MOD (number, divisor)争论 Argument描述Required/OptionalNumberThe number for which you want to find the remainder.RequiredDivisorThe number by which you want to divide number.Required No…

Spring注解 bean基础

一、Spring注解 bean扫描与注入 <dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>4.3.12.RELEASE</version></dependency>1. 组件注册Configuration和Bean的注入 1&…

FPGA计数器边界问题解析

FPGA计数器边界问题解析 一次作者在处理AMBE2000数据接收过程中&#xff0c;遇到一个问题&#xff0c;对该计数器边界总是模糊不清。现在予以说明&#xff0c;以警示以后工作时书写错误代码。 AMBE2000数据一旦准备好后&#xff0c;一次会输出24个字&#xff0c;其中第1个字0x…

swift 问答app

结构体 mvc模式 不变性 试一试

Hbuilder本地调试微信H5项目(一)

摘要 通过内网穿透&#xff0c;访问本地Hbuilder创建的Vue项目 前置准备 下载并安装【HBuilder】&#xff0c;本文用的是HBuilder3.8.12版本&#xff0c;下载地址 下载并安装【微信开发者工具】&#xff0c;本文用的是1.06版本&#xff0c;下载地址 下载并安装【natapp】&a…

JMeter压测工具介绍、安装及汉化教程,详解安装目录结构

&#x1f9d1;‍&#x1f4bb;作者名称&#xff1a;DaenCode &#x1f3a4;作者简介&#xff1a;CSDN实力新星&#xff0c;后端开发两年经验&#xff0c;曾担任甲方技术代表&#xff0c;业余独自创办智源恩创网络科技工作室。会点点Java相关技术栈、帆软报表、低代码平台快速开…

使用VMware 16 安装中标麒麟 7 --九五小庞

1、下载中标麒麟7 百度网盘&#xff1a; 百度网盘 请输入提取码 百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固&#xff0c;支持教育网加速&#xff0c;支持手机端。注册使用百度网盘即可享受免费存储空间 https://pan.baidu.com/s/1LlmRzKHTF-NR…

为什么Python赢了,别的语言都干嘛去了?

人工智能时代&#xff0c;为什么Python大放异彩&#xff0c;别的语言都干嘛去了&#xff1f; 为什么不是使用者众多的Java&#xff1f;也许是Java啰里啰唆&#xff0c;不如Python那么简洁&#xff1f; 为什么不是Ruby&#xff1f; 和Python一样简洁&#xff0c;但是更加优雅。…

​全球人类读书会《乡村振兴战略下传统村落文化旅游设计》许少辉八一著作

​全球人类读书会《乡村振兴战略下传统村落文化旅游设计》许少辉八一著作

数据库数据恢复-ORACLE常见故障有哪些?恢复数据的可能性高吗?

ORACLE数据库常见故障&#xff1a; 1、ORACLE数据库无法启动或无法正常工作。 2、ORACLE数据库ASM存储破坏。 3、ORACLE数据库数据文件丢失。 4、ORACLE数据库数据文件部分损坏。 5、ORACLE数据库DUMP文件损坏。 ORACLE数据库数据恢复可能性分析&#xff1a; 1、ORACLE数据库无…

路由器端口转发

什么是路由器端口转发 路由器端口转发是一种网络配置技术&#xff0c;用于将公共网络&#xff08;如互联网&#xff09;上的请求转发到私有网络中的特定设备或服务。它允许外部设备通过路由器访问内部网络中的设备或服务&#xff0c;实现网络上的通信和互动。 路由器端口转发…

使用凌鲨管理本地仓库

GIT是一种分布式版本控制系统&#xff0c;它允许开发人员在不依赖于中央服务器的情况下进行代码管理和协作。GIT在处理大型项目和复杂的版本历史方面表现出色&#xff0c;提供了强大的分支和合并功能&#xff0c;使得开发团队可以更高效地进行软件开发和代码维护。 管理本地GI…

【python小工具--从0到1实现连点器功能】

python 从0到1实现连点器功能 前言准备工作环境搭建python & vscode 自己给自己提需求解决自己的需求创建可视化界面获取点击点设置点击时间间隔和点击次数连续点击 测试 前言 由于需要干啥啥啥&#xff0c;需要用到连点器&#xff0c;找了找&#xff0c;都没有一款可以用…