问题描述
我是 Docker 的新手，我正在尝试使用 import React,{ useEffect } from "react";
import clsx from "clsx";
import { makeStyles,useTheme } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import CssBaseline from "@material-ui/core/CssBaseline";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import List from "@material-ui/core/List";
import Typography from "@material-ui/core/Typography";
import Divider from "@material-ui/core/Divider";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import InBoxIcon from "@material-ui/icons/MovetoInBox";
import MailIcon from "@material-ui/icons/Mail";
import Paper from "@material-ui/core/Paper";
const drawerWidth = 240;
const useStyles = makeStyles((theme) => ({
root: {
display: "flex"
},appBar: {
transition: theme.transitions.create(["margin","width"],{
easing: theme.transitions.easing.sharp,duration: theme.transitions.duration.leavingScreen
})
},appBarShift: {
width: `calc(100% - ${drawerWidth}px)`,marginLeft: drawerWidth,transition: theme.transitions.create(["margin",{
easing: theme.transitions.easing.eaSEOut,duration: theme.transitions.duration.enteringScreen
})
},menuButton: {
marginRight: theme.spacing(2)
},hide: {
display: "none"
},drawer: {
width: drawerWidth,flexShrink: 0
},drawerPaper: {
width: drawerWidth
},drawerHeader: {
display: "flex",alignItems: "center",padding: theme.spacing(0,1),// necessary for content to be below app bar
...theme.mixins.toolbar,justifyContent: "flex-end"
},content: {
flexGrow: 1,padding: theme.spacing(3),transition: theme.transitions.create("margin",duration: theme.transitions.duration.leavingScreen
}),marginLeft: -drawerWidth
},contentShift: {
transition: theme.transitions.create("margin",duration: theme.transitions.duration.enteringScreen
}),marginLeft: 0
}
}));
export default function PersistentDrawerLeft() {
const classes = useStyles();
const theme = useTheme();
const [open,setopen] = React.useState(false);
const [html,setHtml] = React.useState("");
useEffect(() => {
setHtml(`<!doctype html>
<html>
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title></title>
<link href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" rel="stylesheet">
<style>
#table_wrapper{
overflow-x: hidden;
}
.mdc-data-table{
width: 100%;
}
</style>
</head>
<body>
<table id="jEZeucEZQISp" class="display" style="width:100%">
<thead>
<tr>
<th>STATE</th>
<th>CAPITAL</th>
<th>WIKIPEDIA LINK</th>
<th>VISITED</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script>
var my_jquery = $.noConflict(true);
my_jquery(document).ready(function(){
my_jquery('#jEZeucEZQISp').DataTable({
data: [["Alabama","Montgomery","https://en.wikipedia.org/wiki/Montgomery,_Alabama","TRUE"],["Alaska","Juneau","https://en.wikipedia.org/wiki/Juneau,_Alaska",["Arizona","Phoenix","https://en.wikipedia.org/wiki/Phoenix,_Arizona",["Arkansas","Little Rock","https://en.wikipedia.org/wiki/Little_Rock,_Arkansas",["California","Sacramento","https://en.wikipedia.org/wiki/Sacramento,_California",["Colorado","Denver","https://en.wikipedia.org/wiki/Denver,_Colorado",["Connecticut","Hartford","https://en.wikipedia.org/wiki/Hartford,_Connecticut",["Delaware","Dover","https://en.wikipedia.org/wiki/Dover,_Delaware","FALSE"],["Florida","Tallahassee","https://en.wikipedia.org/wiki/Tallahassee,_Florida",["Georgia","Atlanta","https://en.wikipedia.org/wiki/Atlanta,_Georgia",["Hawaii","Honolulu","https://en.wikipedia.org/wiki/Honolulu,_Hawaii",["Idaho","Boise","https://en.wikipedia.org/wiki/Boise,_Idaho",["Illinois","Springfield","https://en.wikipedia.org/wiki/Springfield,_Illinois",["Indiana","Indianapolis","https://en.wikipedia.org/wiki/Indianapolis,_Indiana",["Iowa","Des Moines","https://en.wikipedia.org/wiki/Des%20Moines,_Iowa",["Kansas","Topeka","https://en.wikipedia.org/wiki/Topeka,_Kansas",["Kentucky","Frankfort","https://en.wikipedia.org/wiki/Frankfort,_Kentucky",["Louisiana","Baton Rouge","https://en.wikipedia.org/wiki/Baton%20Rouge,_Louisiana",["Maine","Augusta","https://en.wikipedia.org/wiki/Augusta,_Maine",["Maryland","Annapolis","https://en.wikipedia.org/wiki/Annapolis,_Maryland",["Massachusetts","Boston","https://en.wikipedia.org/wiki/Boston,_Massachusetts",["Michigan","Lansing","https://en.wikipedia.org/wiki/Lansing,_Michigan",["Minnesota","St. Paul","https://en.wikipedia.org/wiki/St.%20Paul,_Minnesota",["Mississippi","Jackson","https://en.wikipedia.org/wiki/Jackson,_Mississippi",["Missouri","Jefferson City","https://en.wikipedia.org/wiki/Jefferson%20City,_Missouri",["Montana","Helena","https://en.wikipedia.org/wiki/Helena,_Montana",["Nebraska","Lincoln","https://en.wikipedia.org/wiki/Lincoln,_Nebraska",["Nevada","Carson City","https://en.wikipedia.org/wiki/Carson%20City,_Nevada",["New Hampshire","Concord","https://en.wikipedia.org/wiki/Concord,_New%20Hampshire",["New Jersey","Trenton","https://en.wikipedia.org/wiki/Trenton,_New%20Jersey",["New Mexico","Santa Fe","https://en.wikipedia.org/wiki/Santa%20Fe,_New%20Mexico",["New York","Albany","https://en.wikipedia.org/wiki/Albany,_New%20York",["north Carolina","Raleigh","https://en.wikipedia.org/wiki/Raleigh,_north%20Carolina",["north Dakota","Bismarck","https://en.wikipedia.org/wiki/Bismarck,_north%20Dakota",["Ohio","Columbus","https://en.wikipedia.org/wiki/Columbus,_Ohio",["Oklahoma","Oklahoma City","https://en.wikipedia.org/wikI/Oklahoma%20City,_Oklahoma",["Oregon","Salem","https://en.wikipedia.org/wiki/Salem,_Oregon",["Pennsylvania","Harrisburg","https://en.wikipedia.org/wiki/Harrisburg,_Pennsylvania",["Rhode Island","Providence","https://en.wikipedia.org/wiki/Providence,_Rhode%20Island",["South Carolina","Columbia","https://en.wikipedia.org/wiki/Columbia,_South%20Carolina",["South Dakota","Pierre","https://en.wikipedia.org/wiki/Pierre,_South%20Dakota",["Tennessee","Nashville","https://en.wikipedia.org/wiki/Nashville,_Tennessee",["Texas","Austin","https://en.wikipedia.org/wiki/Austin,_Texas",["Utah","Salt Lake City","https://en.wikipedia.org/wiki/Salt%20Lake%20City,_Utah",["Vermont","Montpelier","https://en.wikipedia.org/wiki/Montpelier,_Vermont",["Virginia","Richmond","https://en.wikipedia.org/wiki/Richmond,_Virginia",["Washington","Olympia","https://en.wikipedia.org/wikI/Olympia,_Washington",["West Virginia","Charleston","https://en.wikipedia.org/wiki/Charleston,_West%20Virginia",["Wisconsin","Madison","https://en.wikipedia.org/wiki/Madison,_Wisconsin",["Wyoming","Cheyenne","https://en.wikipedia.org/wiki/Cheyenne,_Wyoming","TRUE"]],idisplayLength: 25,"scrollX": false,scrollY: '',scrollCollapse: false,search: {
search: "",},});
});
</script>
</body>
</html>`);
},[]);
const handleDrawerOpen = () => {
setopen(true);
};
const handleDrawerClose = () => {
setopen(false);
};
return (
<div className={classes.root}>
<CssBaseline />
<AppBar
position="fixed"
className={clsx(classes.appBar,{
[classes.appBarShift]: open
})}
>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
className={clsx(classes.menuButton,open && classes.hide)}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" Nowrap>
Persistent drawer
</Typography>
</Toolbar>
</AppBar>
<Drawer
className={classes.drawer}
variant="persistent"
anchor="left"
open={open}
classes={{
paper: classes.drawerPaper
}}
>
<div className={classes.drawerHeader}>
<IconButton onClick={handleDrawerClose}>
{theme.direction === "ltr" ? (
<ChevronLeftIcon />
) : (
<ChevronRightIcon />
)}
</IconButton>
</div>
<Divider />
<List>
{["InBox","Starred","Send email","Drafts"].map((text,index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InBoxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{["All mail","Trash","Spam"].map((text,index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InBoxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</Drawer>
<main
className={clsx(classes.content,{
[classes.contentShift]: open
})}
>
<div className={classes.drawerHeader} />
<Paper
elevation={1}
style={{ minHeight: "auto",height: "100vh" }}
flex={1}
overflow="auto"
>
<iframe
id="widget"
name="widget"
title="widget"
scrolling="yes"
frameBorder="0"
width="100%"
height="100%"
srcdoc={html}
style={{ position: "relative",height: "100%" }}
></iframe>
</Paper>
</main>
</div>
);
}
通过 Docker 安装 csvtk。
下面是我的debian:stretch-slim
Dockerfile它在 FROM debian:stretch-slim
RUN apt-get update \
&& apt-get install -y --no-install-recommends \
jq \
perl \
python3 \
wget \
&& rm -rf /var/lib/apt/lists/*
RUN wget -qO- https://github.com/shenwei356/csvtk/releases/download/v0.23.0/csvtk_linux_amd64.tar.gz | tar -xz \
&& cp csvtk /usr/local/bin/
步骤失败并显示以下错误消息：
csvtk如果您有任何帮助/建议，我将不胜感激。
提前致谢。
解决方法
wget 正在退出，错误代码意味着 wget 上的 5 SSL 验证失败。从 this answer 开始，您只需要在 ca-certificates 之前安装 wget。
这个 Dockerfile 应该能成功构建：
FROM debian:stretch-slim
RUN apt-get update \
&& apt-get install -y --no-install-recommends \
jq \
perl \
python3 \
wget \
# added this package to help with ssl certs in Docker
ca-certificates \
&& rm -rf /var/lib/apt/lists/*
RUN wget -qO- https://github.com/shenwei356/csvtk/releases/download/v0.23.0/csvtk_linux_amd64.tar.gz | tar -xz \
&& cp csvtk /usr/local/bin/
作为调试此类问题时的一般提示，最简单的方法可能是从 Dockerfile 中删除有问题的 RUN 行，然后尝试在 shell 中构建和运行容器并手动执行所需的命令。像这样：
docker build -t test:v1 .
docker run --rm -it test:v1 /bin/bash
# run commands manually and check the full error output
虽然将不同的 RUN 指令与 && 结合是减少图像层数的最佳做法，但在构建时很难调试。