home & use case pages
This commit is contained in:
Jeff Escalante
parent
0629d161ac
commit
99c297e898
|
|
@ -0,0 +1,47 @@
|
|||
function BeforeAfterDiagram({
|
||||
beforeHeading,
|
||||
beforeSubTitle,
|
||||
beforeImage,
|
||||
beforeDescription,
|
||||
afterHeading,
|
||||
afterSubTitle,
|
||||
afterImage,
|
||||
afterDescription,
|
||||
}) {
|
||||
return (
|
||||
<div class="g-timeline">
|
||||
<div>
|
||||
<span class="line"></span>
|
||||
<span class="line">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="11"
|
||||
height="15"
|
||||
viewBox="0 0 11 15"
|
||||
>
|
||||
<path
|
||||
fill="#CA2171"
|
||||
d="M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="dot"></span>
|
||||
<h3>{beforeHeading}</h3>
|
||||
<span class="sub-heading">{beforeSubTitle}</span>
|
||||
<img src={beforeImage} alt={beforeSubTitle} class="static-callout" />
|
||||
{beforeDescription && <p>{beforeDescription}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<span class="dot"></span>
|
||||
<h3>{afterHeading}</h3>
|
||||
<span class="sub-heading">{afterSubTitle}</span>
|
||||
<div id="index-dynamic-animation">
|
||||
<img src={afterImage} alt={afterSubTitle} class="static-callout" />
|
||||
</div>
|
||||
{afterDescription && <p>{afterDescription}</p>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BeforeAfterDiagram
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
.g-timeline {
|
||||
align-content: space-between;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: 0 -15px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.no-intro {
|
||||
margin-top: -30px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
margin-top: -90px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
margin-top: -116px;
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
margin-left: 18px;
|
||||
padding: 40px 15px 0 42px;
|
||||
position: relative;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
margin-left: 0;
|
||||
padding-left: 15px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
& .dot {
|
||||
border-color: #ca2171;
|
||||
}
|
||||
}
|
||||
|
||||
& .line {
|
||||
background-image: linear-gradient(180deg, #d2d4dc 50%, #c82070 100%);
|
||||
height: calc(100% - 12px);
|
||||
left: 8px;
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
width: 2px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
rgba(229, 230, 235, 0),
|
||||
#d2d4dc 0%,
|
||||
#c82070 100%
|
||||
);
|
||||
height: 2px;
|
||||
left: 50%;
|
||||
top: 8px;
|
||||
width: calc(100% - 34px);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
background-image: linear-gradient(
|
||||
180deg,
|
||||
rgba(229, 230, 235, 0) 5%,
|
||||
#dadce3 70%,
|
||||
#d2d4dc 100%
|
||||
);
|
||||
bottom: calc(100% - 45px);
|
||||
height: 60px;
|
||||
top: auto;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
rgba(229, 230, 235, 0) 5%,
|
||||
#dadce3 26%,
|
||||
#d2d4dc 100%
|
||||
);
|
||||
height: 2px;
|
||||
left: auto;
|
||||
right: 50%;
|
||||
top: 8px;
|
||||
width: calc(50% + 120px);
|
||||
}
|
||||
}
|
||||
|
||||
& svg {
|
||||
position: absolute;
|
||||
top: calc(100% - 8px);
|
||||
transform: rotate(90deg);
|
||||
left: -4px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
left: auto;
|
||||
right: -10px;
|
||||
top: -6px;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& h2 {
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
& .sub-heading {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
|
||||
@media (min-width: 992px) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
& .dot {
|
||||
background: #f7f8fa;
|
||||
border: 2px solid #d2d4dc;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
width: 18px;
|
||||
z-index: 1;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
margin: 0 0 0 -9px;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
& p {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,11 @@
|
|||
export default [
|
||||
{
|
||||
text: 'Use Cases',
|
||||
submenu: [
|
||||
{ text: 'Service Discovery', url: '/discovery' },
|
||||
{ text: 'Service Mesh', url: '/mesh' },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'Intro',
|
||||
url: '/intro',
|
||||
|
|
|
|||
|
|
@ -1546,6 +1546,11 @@
|
|||
"resolved": "https://registry.npmjs.org/@hashicorp/localstorage-polyfill/-/localstorage-polyfill-1.0.12.tgz",
|
||||
"integrity": "sha512-wUWfaiEUo+2qcBjzYKwGpjqFsMCcD+Z4egF/2DHL13kvNZgbFMRBgSww0/bmOVq7ovhp3BnMRiHKZvcugRr1OQ=="
|
||||
},
|
||||
"@hashicorp/mktg-assets": {
|
||||
"version": "1.0.0-alpha.3",
|
||||
"resolved": "https://registry.npmjs.org/@hashicorp/mktg-assets/-/mktg-assets-1.0.0-alpha.3.tgz",
|
||||
"integrity": "sha512-AvRPKxi6bEzjS6U8dZR9FGjPmlqxxTdzPeFZXYTsc8kUGjoY/X9/GXY2zYCpzEpmUdnLzOSJrDl17INPEeL4Pw=="
|
||||
},
|
||||
"@hashicorp/nextjs-scripts": {
|
||||
"version": "6.2.0-12",
|
||||
"resolved": "https://registry.npmjs.org/@hashicorp/nextjs-scripts/-/nextjs-scripts-6.2.0-12.tgz",
|
||||
|
|
@ -1620,6 +1625,25 @@
|
|||
"slugify": "^1.3.6"
|
||||
}
|
||||
},
|
||||
"@hashicorp/react-call-to-action": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@hashicorp/react-call-to-action/-/react-call-to-action-0.1.4.tgz",
|
||||
"integrity": "sha512-iarXkPvlDmbgvzKN5soh7rD3KXpgUPWB0wSIonvfSxZVUZ4NPKXpm3TkOuK/tpikubgFm3PmViODwJ42ydCG4A==",
|
||||
"requires": {
|
||||
"@hashicorp/react-button": "^2.1.7",
|
||||
"@hashicorp/react-global-styles": "^4.1.0"
|
||||
}
|
||||
},
|
||||
"@hashicorp/react-case-study-slider": {
|
||||
"version": "2.0.11",
|
||||
"resolved": "https://registry.npmjs.org/@hashicorp/react-case-study-slider/-/react-case-study-slider-2.0.11.tgz",
|
||||
"integrity": "sha512-3mA0nGPS2JXMRVRWjL5lF+sSQu47Py6LmBIuILlKkgSAHrEC45doeRyK/OjKv5aSl9qCIAhuQ+uugL1ZTMI3rg==",
|
||||
"requires": {
|
||||
"@hashicorp/react-button": "^2.1.7",
|
||||
"@hashicorp/react-image": "^2.0.1",
|
||||
"marked": "^0.7.0"
|
||||
}
|
||||
},
|
||||
"@hashicorp/react-checkbox-input": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@hashicorp/react-checkbox-input/-/react-checkbox-input-2.0.0.tgz",
|
||||
|
|
@ -1899,11 +1923,38 @@
|
|||
"@hashicorp/react-text-split": "^0.2.4"
|
||||
}
|
||||
},
|
||||
"@hashicorp/react-text-split-with-logo-grid": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@hashicorp/react-text-split-with-logo-grid/-/react-text-split-with-logo-grid-1.0.2.tgz",
|
||||
"integrity": "sha512-yD1sk5vRavXcBB6sAwY7gezcudevqPugBj1KX8i+PT9mNXribtHaFzEZsMYBRz4HINm3jt80RroIm78uwGQxMg==",
|
||||
"requires": {
|
||||
"@hashicorp/mktg-assets": "^1.0.0-alpha.3",
|
||||
"@hashicorp/react-global-styles": "^2.1.17-fonts.0",
|
||||
"@hashicorp/react-image": "^2.0.1",
|
||||
"@hashicorp/react-text-split": "^0.2.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hashicorp/react-global-styles": {
|
||||
"version": "2.1.17-fonts.0",
|
||||
"resolved": "https://registry.npmjs.org/@hashicorp/react-global-styles/-/react-global-styles-2.1.17-fonts.0.tgz",
|
||||
"integrity": "sha512-76CdVVac6yiKUScd55m+AxKx238QZjNhfespn/PpoGkyECYGzaYrdT20GpzIStFTia5Db4/fnGJcECpwcQpCxA=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@hashicorp/react-toggle": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@hashicorp/react-toggle/-/react-toggle-1.0.1.tgz",
|
||||
"integrity": "sha512-KW7HBPKHdzk+R34pAFuqkcdKRCe04Qvv6xJw8FCeieuq/mBMd4dI+ZNSEbm68+STUKoiq5OAp2dWzAF/iwmKqg=="
|
||||
},
|
||||
"@hashicorp/react-use-cases": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@hashicorp/react-use-cases/-/react-use-cases-1.0.4.tgz",
|
||||
"integrity": "sha512-IB+HcC5X54vPMW+JOPkqxsrgN+NmqIXytsL1qOsP5yJ1PeEbS8Sy1YCrOjx06ZkVCv/qXM49VTvHqj/B006lFQ==",
|
||||
"requires": {
|
||||
"@hashicorp/react-image": "^2.0.1",
|
||||
"marked": "^0.7.0"
|
||||
}
|
||||
},
|
||||
"@hashicorp/react-vertical-text-block-list": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@hashicorp/react-vertical-text-block-list/-/react-vertical-text-block-list-2.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -6,9 +6,13 @@
|
|||
"dependencies": {
|
||||
"@bugsnag/js": "^6.5.2",
|
||||
"@bugsnag/plugin-react": "^6.5.0",
|
||||
"@hashicorp/mktg-assets": "^1.0.0-alpha.3",
|
||||
"@hashicorp/nextjs-scripts": "^6.2.0-12",
|
||||
"@hashicorp/react-alert": "^2.0.0",
|
||||
"@hashicorp/react-button": "^2.1.7",
|
||||
"@hashicorp/react-call-to-action": "^0.1.4",
|
||||
"@hashicorp/react-case-study-slider": "^2.0.11",
|
||||
"@hashicorp/react-code-block": "^1.2.6",
|
||||
"@hashicorp/react-consent-manager": "^2.0.7",
|
||||
"@hashicorp/react-content": "^3.0.0-0",
|
||||
"@hashicorp/react-docs-page": "^1.1.0",
|
||||
|
|
@ -21,6 +25,7 @@
|
|||
"@hashicorp/react-hero": "^3.0.5",
|
||||
"@hashicorp/react-image": "^2.0.1",
|
||||
"@hashicorp/react-inline-svg": "^1.0.0",
|
||||
"@hashicorp/react-logo-grid": "^2.0.9",
|
||||
"@hashicorp/react-mega-nav": "^4.0.1-2",
|
||||
"@hashicorp/react-product-downloader": "^3.0.5",
|
||||
"@hashicorp/react-section-header": "^2.0.0",
|
||||
|
|
@ -29,6 +34,8 @@
|
|||
"@hashicorp/react-text-split": "^0.2.4",
|
||||
"@hashicorp/react-text-split-with-code": "0.0.7",
|
||||
"@hashicorp/react-text-split-with-image": "^1.2.4",
|
||||
"@hashicorp/react-text-split-with-logo-grid": "^1.0.2",
|
||||
"@hashicorp/react-use-cases": "^1.0.4",
|
||||
"@hashicorp/react-vertical-text-block-list": "^2.0.1",
|
||||
"babel-plugin-import-glob-array": "^0.2.0",
|
||||
"highlight.js": "^9.18.1",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,116 @@
|
|||
.button {
|
||||
background: var(--consul);
|
||||
border-radius: 1px;
|
||||
box-sizing: border-box;
|
||||
color: var(--white);
|
||||
display: inline-block;
|
||||
font-size: 0.938rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.6em;
|
||||
margin-bottom: 4px;
|
||||
padding: 14px 20px;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 3px solid #e07eac;
|
||||
outline: none;
|
||||
padding: 11px 17px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
|
||||
var(--consul);
|
||||
border: none;
|
||||
padding: 14px 20px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
|
||||
var(--consul);
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.white {
|
||||
background: var(--white);
|
||||
color: var(--black);
|
||||
|
||||
& path {
|
||||
fill: black;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #fff2f8;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #f8d9e7;
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(29, 30 35, 0.2);
|
||||
color: var(--black);
|
||||
padding: 13px 19px;
|
||||
|
||||
&:focus {
|
||||
border: 3px solid #e07eac;
|
||||
padding: 11px 17px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(29, 30 35, 0.1);
|
||||
border: none;
|
||||
padding: 14px 20px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba(29, 30 35, 0.16);
|
||||
}
|
||||
|
||||
&.white {
|
||||
border: 1px solid rgba(255, 255, 255, 0.24);
|
||||
color: var(--white);
|
||||
|
||||
&:focus {
|
||||
border: 3px solid #e07eac;
|
||||
padding: 11px 17px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
border: none;
|
||||
padding: 14px 20px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.download {
|
||||
& svg {
|
||||
margin: 0 4px -4px 0;
|
||||
|
||||
& path {
|
||||
transition: fill 0.25s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.inline {
|
||||
padding: 8px 14px;
|
||||
}
|
||||
|
||||
& path {
|
||||
fill: var(--white);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,497 @@
|
|||
import CallToAction from '@hashicorp/react-call-to-action'
|
||||
import CaseStudySlider from '@hashicorp/react-case-study-slider'
|
||||
import CodeBlock from '@hashicorp/react-code-block'
|
||||
import BeforeAfterDiagram from '../../components/before-after'
|
||||
|
||||
export default function ServiceDiscovery() {
|
||||
return (
|
||||
<>
|
||||
<div className="consul-connect">
|
||||
<CallToAction
|
||||
heading="Service discovery made easy"
|
||||
content="Service registry, integrated health checks, and DNS and HTTP interfaces enable any service to discover and be discovered by other services"
|
||||
brand="consul"
|
||||
links={[
|
||||
{ text: 'Download', url: '/downloads' },
|
||||
{
|
||||
text: 'Explore Docs',
|
||||
url:
|
||||
'https://learn.hashicorp.com/consul/getting-started/services',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<section
|
||||
id="static-dynamic"
|
||||
className="g-section-block layout-vertical theme-white-background-black-text small-padding"
|
||||
>
|
||||
<div className="g-grid-container">
|
||||
<BeforeAfterDiagram
|
||||
beforeHeading="The Challenge"
|
||||
beforeSubTitle="Service load balancers aren't efficient in a dynamic world."
|
||||
beforeImage="/img/consul-connect/svgs/discovery-challenge.svg"
|
||||
beforeDescription="Load balancers are often used to front a service tier and provide a static IP. These load balancers add cost, increase latency, introduce single points of failure, and must be updated as services scale up/down."
|
||||
afterHeading="The Solution"
|
||||
afterSubTitle="Service discovery for dynamic infrastructure."
|
||||
afterImage="/img/consul-connect/svgs/discovery-solution.svg"
|
||||
afterDescription="Instead of load balancers, connectivity in dynamic infrastructure is best solved with service discovery. Service discovery uses a registry to keep a real-time list of services, their location, and their health. Services query the registry to discover the location of upstream services and then connect directly. This allows services to scale up/down and gracefully handle failure without a load balancer intermediary."
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section></section>
|
||||
|
||||
<section class="g-section border-top large-padding">
|
||||
<div class="g-container">
|
||||
<div class="intro">
|
||||
<h2 class="g-type-display-2">Features</h2>
|
||||
</div>
|
||||
<div class="g-text-asset large">
|
||||
<div>
|
||||
<div>
|
||||
<h3 class="g-type-display-3">Service Registry</h3>
|
||||
<p class="g-type-body">
|
||||
Consul provides a registry of all the running nodes and
|
||||
services, along with their current health status. This
|
||||
allows operators to understand the environment, and
|
||||
applications and automation tools to interact with dynamic
|
||||
infrastructure using an HTTP API.
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
class="learn-more g-type-buttons-and-standalone-links"
|
||||
href="https://learn.hashicorp.com/consul/getting-started/services"
|
||||
>
|
||||
Learn more
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="6"
|
||||
height="10"
|
||||
viewBox="0 0 6 10"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
transform="translate(-6 -3)"
|
||||
>
|
||||
<mask id="a" fill="#fff">
|
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" />
|
||||
</mask>
|
||||
<g fill="#1563FF" mask="url(#a)">
|
||||
<path d="M0 0h16v16H0z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<picture>
|
||||
<source
|
||||
type="image/webp"
|
||||
srcSet="
|
||||
/img/consul-connect/ui-health-checks/ui-health-checks_230.webp 230w,
|
||||
/img/consul-connect/ui-health-checks/ui-health-checks_690.webp 690w,
|
||||
/img/consul-connect/ui-health-checks/ui-health-checks_1290.webp 1290w"
|
||||
/>
|
||||
<source
|
||||
type="image/jpg"
|
||||
srcSet="
|
||||
/img/consul-connect/ui-health-checks/ui-health-checks_230.jpg 230w,
|
||||
/img/consul-connect/ui-health-checks/ui-health-checks_690.jpg 690w,
|
||||
/img/consul-connect/ui-health-checks/ui-health-checks_1290.jpg 1290w"
|
||||
/>
|
||||
<img
|
||||
src="/img/consul-connect/ui-health-checks/ui-health-checks_1290.jpg"
|
||||
alt="Service Registry"
|
||||
/>
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="g-section border-top large-padding">
|
||||
<div class="g-container">
|
||||
<div class="g-text-asset reverse">
|
||||
<div>
|
||||
<div>
|
||||
<h3 class="g-type-display-3">DNS Query Interface</h3>
|
||||
<p class="g-type-body">
|
||||
Consul enables service discovery using a built-in DNS
|
||||
server. This allows existing applications to easily
|
||||
integrate, as almost all applications support using DNS to
|
||||
resolve IP addresses. Using DNS instead of a static IP
|
||||
address allows services to scale up/down and route around
|
||||
failures easily.
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
class="learn-more g-type-buttons-and-standalone-links"
|
||||
href="https://learn.hashicorp.com/consul/getting-started/services#querying-services"
|
||||
>
|
||||
Learn more
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="6"
|
||||
height="10"
|
||||
viewBox="0 0 6 10"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
transform="translate(-6 -3)"
|
||||
>
|
||||
<mask id="a" fill="#fff">
|
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" />
|
||||
</mask>
|
||||
<g fill="#1563FF" mask="url(#a)">
|
||||
<path d="M0 0h16v16H0z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-sample">
|
||||
<div>
|
||||
<span></span>
|
||||
<CodeBlock
|
||||
prefix="terminal"
|
||||
code={`
|
||||
$ dig web-frontend.service.consul. ANY
|
||||
; <<>> DiG 9.8.3-P1 <<>> web-frontend.service.consul. ANY
|
||||
;; global options: +cmd
|
||||
;; Got answer:
|
||||
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 29981
|
||||
;; flags: qr aa rd ra; QUERY: 1, ANSWER: 2, AUTHORITY: 0, ADDITIONAL: 0
|
||||
|
||||
;; QUESTION SECTION:
|
||||
;web-frontend.service.consul. IN ANY
|
||||
|
||||
;; ANSWER SECTION:
|
||||
web-frontend.service.consul. 0 IN A 10.0.3.83
|
||||
web-frontend.service.consul. 0 IN A 10.0.1.109
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="g-section border-top large-padding">
|
||||
<div class="g-container">
|
||||
<div class="g-text-asset">
|
||||
<div>
|
||||
<div>
|
||||
<h3 class="g-type-display-3">HTTP API with Edge Triggers</h3>
|
||||
<p class="g-type-body">
|
||||
Consul provides an HTTP API to query the service registry
|
||||
for nodes, services, and health check information. The API
|
||||
also supports blocking queries, or long-polling for any
|
||||
changes. This allows automation tools to react to services
|
||||
being registered or health status changes to change
|
||||
configurations or traffic routing in real time.
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
class="learn-more g-type-buttons-and-standalone-links"
|
||||
href="https://learn.hashicorp.com/consul/getting-started/services#http-api"
|
||||
>
|
||||
Learn more
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="6"
|
||||
height="10"
|
||||
viewBox="0 0 6 10"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
transform="translate(-6 -3)"
|
||||
>
|
||||
<mask id="a" fill="#fff">
|
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" />
|
||||
</mask>
|
||||
<g fill="#1563FF" mask="url(#a)">
|
||||
<path d="M0 0h16v16H0z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-sample">
|
||||
<div>
|
||||
<span></span>
|
||||
<CodeBlock
|
||||
prefix="terminal"
|
||||
code={`
|
||||
$ curl http://localhost:8500/v1/health/service/web?index=11&wait=30s
|
||||
{
|
||||
...
|
||||
"Node": "10-0-1-109",
|
||||
"CheckID": "service:web",
|
||||
"Name": "Service 'web' check",
|
||||
"Status": <code class='keyword'>"critical"</code>,
|
||||
"ServiceID": "web",
|
||||
"ServiceName": "web",
|
||||
"CreateIndex": 10,
|
||||
"ModifyIndex": 20
|
||||
...
|
||||
}
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="g-section border-top large-padding">
|
||||
<div class="g-container">
|
||||
<div class="g-text-asset reverse">
|
||||
<div>
|
||||
<div>
|
||||
<h3 class="g-type-display-3">Multi Datacenter</h3>
|
||||
<p class="g-type-body">
|
||||
Consul supports multiple datacenters out of the box with no
|
||||
complicated configuration. Look up services in other
|
||||
datacenters or keep the request local. Advanced features
|
||||
like Prepared Queries enable automatic failover to other
|
||||
datacenters.
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
class="learn-more g-type-buttons-and-standalone-links"
|
||||
href="https://learn.hashicorp.com/consul/security-networking/datacenters"
|
||||
>
|
||||
Learn more
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="6"
|
||||
height="10"
|
||||
viewBox="0 0 6 10"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
transform="translate(-6 -3)"
|
||||
>
|
||||
<mask id="a" fill="#fff">
|
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" />
|
||||
</mask>
|
||||
<g fill="#1563FF" mask="url(#a)">
|
||||
<path d="M0 0h16v16H0z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-sample">
|
||||
<div>
|
||||
<span></span>
|
||||
<div class="code">
|
||||
<CodeBlock
|
||||
prefix="terminal"
|
||||
code={`
|
||||
$ curl http://localhost:8500/v1/catalog/datacenters
|
||||
[
|
||||
"dc1",
|
||||
"dc2"
|
||||
]
|
||||
$ curl http://localhost:8500/v1/catalog/nodes?dc=dc2
|
||||
[
|
||||
{
|
||||
"ID": "7081dcdf-fdc0-0432-f2e8-a357d36084e1",
|
||||
"Node": "10-0-1-109",
|
||||
"Address": "10.0.1.109",
|
||||
"Datacenter": "<code class='keyword'>dc2</code>",
|
||||
"TaggedAddresses": {
|
||||
"lan": "10.0.1.109",
|
||||
"wan": "10.0.1.109"
|
||||
},
|
||||
"CreateIndex": 112,
|
||||
"ModifyIndex": 125
|
||||
},
|
||||
...
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="g-section border-top large-padding">
|
||||
<div class="g-container">
|
||||
<div class="g-text-asset large">
|
||||
<div>
|
||||
<div>
|
||||
<h3 class="g-type-display-3">Health Checks</h3>
|
||||
<p class="g-type-body">
|
||||
Pairing service discovery with health checking prevents
|
||||
routing requests to unhealthy hosts and enables services to
|
||||
easily provide circuit breakers.
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
class="learn-more g-type-buttons-and-standalone-links"
|
||||
href="https://learn.hashicorp.com/consul/getting-started/services"
|
||||
>
|
||||
Learn more
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="6"
|
||||
height="10"
|
||||
viewBox="0 0 6 10"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
transform="translate(-6 -3)"
|
||||
>
|
||||
<mask id="a" fill="#fff">
|
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" />
|
||||
</mask>
|
||||
<g fill="#1563FF" mask="url(#a)">
|
||||
<path d="M0 0h16v16H0z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<picture>
|
||||
<source
|
||||
type="image/webp"
|
||||
srcSet="
|
||||
/img/consul-connect/ui-health-checks/ui-health-checks_230.webp 230w,
|
||||
/img/consul-connect/ui-health-checks/ui-health-checks_690.webp 690w,
|
||||
/img/consul-connect/ui-health-checks/ui-health-checks_1290.webp 1290w"
|
||||
/>
|
||||
<source
|
||||
type="image/jpg"
|
||||
srcSet="
|
||||
/img/consul-connect/ui-health-checks/ui-health-checks_230.jpg 230w,
|
||||
/img/consul-connect/ui-health-checks/ui-health-checks_690.jpg 690w,
|
||||
/img/consul-connect/ui-health-checks/ui-health-checks_1290.jpg 1290w"
|
||||
/>
|
||||
<img
|
||||
src="/img/consul-connect/ui-health-checks/ui-health-checks_1290.jpg"
|
||||
alt="Health Checks"
|
||||
/>
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="large-padding bg-dark">
|
||||
<div className="g-grid-container">
|
||||
<div class="intro">
|
||||
<h2 class="g-type-display-2">Use Cases</h2>
|
||||
</div>
|
||||
<CaseStudySlider
|
||||
dark
|
||||
data={{
|
||||
brand: 'consul',
|
||||
caseStudies: [
|
||||
{
|
||||
company: {
|
||||
monochromeLogo: {
|
||||
url:
|
||||
'https://www.datocms-assets.com/2885/1586530899-twitchextrudedwordmarkblackops.png',
|
||||
alt: 'Logo dark',
|
||||
format: 'png',
|
||||
},
|
||||
whiteLogo: {
|
||||
url:
|
||||
'https://www.datocms-assets.com/2885/1586530633-twitch-wordmark-white.svg',
|
||||
alt: 'Logo white',
|
||||
format: 'png',
|
||||
},
|
||||
},
|
||||
headline:
|
||||
'Twitch - Driving Towards a Modern Infrastructure',
|
||||
description:
|
||||
'In this talk from HashiConf 2015, Tarrant Rollins discusses how Twitch uses HashiCorp Consul to overcome legacy infrastructure and solve complex problems.',
|
||||
caseStudyResource: {
|
||||
slug: 'twitch-driving-towards-a-modern-infrastructure',
|
||||
image: {
|
||||
url:
|
||||
'/img/consul-connect/case-studies/case-study_01.jpg',
|
||||
alt: 'Twitch - Modern Infrastructure',
|
||||
format: 'jpg',
|
||||
},
|
||||
},
|
||||
buttonLabel: 'Watch Video',
|
||||
},
|
||||
{
|
||||
company: {
|
||||
monochromeLogo: {
|
||||
url:
|
||||
'https://www.datocms-assets.com/2885/1522341143-jet-black.svg',
|
||||
alt: 'Logo dark',
|
||||
format: 'svg',
|
||||
},
|
||||
whiteLogo: {
|
||||
url:
|
||||
'https://www.datocms-assets.com/2885/1522341147-jet-white.svg',
|
||||
alt: 'Logo white',
|
||||
format: 'svg',
|
||||
},
|
||||
},
|
||||
headline:
|
||||
'Jet.com - Nomad Auto-Proxy with Consul-Template and NGINX',
|
||||
description:
|
||||
'Justen Walker explains how Jet.com uses HashiCorp Consul and Nomad to allow hundreds of developers to have self-service access, despite relying on NGINX static configs—and with a remarkably small DevOps team.',
|
||||
caseStudyResource: {
|
||||
slug: 'jet-com-nomad-auto-proxy-consul-template-nginx',
|
||||
image: {
|
||||
url:
|
||||
'/img/consul-connect/case-studies/case-study_02.jpg',
|
||||
alt: 'Jet - Nomad Auto-Proxy',
|
||||
format: 'jpg',
|
||||
},
|
||||
},
|
||||
buttonLabel: 'Watch Video',
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="g-section g-cta-section large-padding">
|
||||
<div>
|
||||
<h2 class="g-type-display-2">Ready to get started?</h2>
|
||||
<a href="/downloads.html" class="button download white">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="22"
|
||||
viewBox="0 0 20 22"
|
||||
>
|
||||
<path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z" />
|
||||
</svg>
|
||||
Download
|
||||
</a>
|
||||
<a
|
||||
href="https://learn.hashicorp.com/consul/getting-started/services"
|
||||
class="button secondary white"
|
||||
>
|
||||
Explore docs
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
.intro {
|
||||
text-align: center;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.g-section.border-top {
|
||||
border-top: 1px solid #e5e6eb;
|
||||
}
|
||||
|
||||
.g-cta-section.g-section {
|
||||
align-items: center;
|
||||
background: var(--consul);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
background: url('/img/consul-connect/mesh.svg') top center;
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0.2;
|
||||
transform: scale(1.3, 1.3);
|
||||
}
|
||||
|
||||
& > div {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
& h2 {
|
||||
color: var(--white);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& .button + .button {
|
||||
margin-left: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
background: #252937 !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -1,3 +1,310 @@
|
|||
import Hero from '@hashicorp/react-hero'
|
||||
import BeforeAfterDiagram from '../../components/before-after'
|
||||
import SectionHeader from '@hashicorp/react-section-header'
|
||||
import consulEnterpriseLogo from '../../public/img/consul-connect/logos/consul-enterprise-logo.svg?include'
|
||||
import consulLogo from '../../public/img/consul-connect/logos/consul-logo.svg?include'
|
||||
|
||||
export default function HomePage() {
|
||||
return <p>Coming soon</p>
|
||||
return (
|
||||
<>
|
||||
<div className="consul-connect">
|
||||
{/* Hero */}
|
||||
<section id="hero">
|
||||
<Hero
|
||||
data={{
|
||||
centered: false,
|
||||
backgroundTheme: 'light',
|
||||
theme: 'consul-pink',
|
||||
smallTextTag: null,
|
||||
title: 'Secure Service Networking',
|
||||
description:
|
||||
'Consul is a service networking solution to connect and secure services across any runtime platform and public or private cloud',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Download',
|
||||
url: '/downloads',
|
||||
external: false,
|
||||
theme: '',
|
||||
gaPrefix: null,
|
||||
},
|
||||
{
|
||||
title: 'Get Started',
|
||||
url:
|
||||
'https://learn.hashicorp.com/consul/getting-started/install',
|
||||
external: false,
|
||||
theme: '',
|
||||
gaPrefix: null,
|
||||
},
|
||||
],
|
||||
helpText: '<a href="View demo of web UI">View demo of web UI</a>',
|
||||
videos: [
|
||||
{
|
||||
name: 'UI',
|
||||
playbackRate: 2,
|
||||
src: [
|
||||
{
|
||||
srcType: 'ogg',
|
||||
},
|
||||
{
|
||||
srcType: 'webm',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
srcType: 'mp4',
|
||||
url:
|
||||
'https://consul-static-asssets.global.ssl.fastly.net/videos/v1/connect-video-ui.mp4',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'CLI',
|
||||
src: [
|
||||
{
|
||||
srcType: 'mp4',
|
||||
url:
|
||||
'https://consul-static-asssets.global.ssl.fastly.net/videos/v1/connect-video-cli.mp4',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</section>
|
||||
{/* Use Cases */}
|
||||
<section
|
||||
id="vault-use-cases"
|
||||
className="g-section-block layout-vertical theme-white-background-black-text bg-light large-padding"
|
||||
>
|
||||
<div className="g-container">
|
||||
<SectionHeader
|
||||
headline="What can you do with Consul?"
|
||||
description="Consul is a service networking tool that allows you to discover services and secure network traffic."
|
||||
/>
|
||||
|
||||
<div className="g-use-cases">
|
||||
<div>
|
||||
<div>
|
||||
<img
|
||||
src="/img/consul-jtbd/kubernetes.png"
|
||||
alt="Upgrade services"
|
||||
/>
|
||||
<h3>Consul-Kubernetes Deployments</h3>
|
||||
<p>
|
||||
Use Consul service discovery and service mesh features with
|
||||
Kubernetes.{' '}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://learn.hashicorp.com/consul/kubernetes/minikube?utm_source=consul.io&utm_medium=home-page&utm_content=jtbd&utm_term=jtbd-k8s"
|
||||
className="button download"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<img
|
||||
src="/img/consul-jtbd/connect.png"
|
||||
alt="Connect services"
|
||||
/>
|
||||
<h3>Secure Service Communication</h3>
|
||||
<p>
|
||||
Secure and observe communication between your services
|
||||
without modifying their code.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://learn.hashicorp.com/consul/getting-started/connect?utm_source=consul.io&utm_medium=home-page&utm_content=jtbd&utm_term=connect"
|
||||
className="button download"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<img
|
||||
src="/img/consul-jtbd/load-balance.png"
|
||||
alt="Load balance services"
|
||||
/>
|
||||
<h3>Dynamic Load Balancing</h3>
|
||||
<p>
|
||||
Automate load balancer configuration with Consul and
|
||||
HAProxy, Nginx, or F5.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://learn.hashicorp.com/consul/integrations/nginx-consul-template?utm_source=consul.io&utm_medium=home-page&utm_content=jtbd&utm_term=lb"
|
||||
className="button download"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Static => Dynamic (Before & After) */}
|
||||
<section
|
||||
id="static-dynamic"
|
||||
className="g-section-block layout-vertical theme-white-background-black-text large-padding"
|
||||
>
|
||||
<div className="g-grid-container">
|
||||
<SectionHeader
|
||||
headline="Service-based networking for dynamic infrastructure"
|
||||
description="The shift from static infrastructure to dynamic infrastructure changes the approach to networking from host-based to service-based. Connectivity moves from the use of static IPs to dynamic service discovery, and security moves from static firewalls to service identity."
|
||||
/>
|
||||
<BeforeAfterDiagram
|
||||
beforeHeading="Static"
|
||||
beforeSubTitle="Host-based networking"
|
||||
beforeImage="/img/consul-connect/svgs/static.svg"
|
||||
afterHeading="Dynamic"
|
||||
afterSubTitle="Service-based networking"
|
||||
afterImage="/img/consul-connect/svgs/dynamic.svg"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section className="g-section bg-light border-top small-padding">
|
||||
<div className="g-container">
|
||||
<div className="g-text-asset">
|
||||
<div>
|
||||
<div>
|
||||
<h3 className="g-type-display-3">Extend and Integrate</h3>
|
||||
<p className="g-type-body">
|
||||
Provision clusters on any infrastructure, connect to
|
||||
services over TLS via proxy integrations, and Serve TLS
|
||||
certificates with pluggable Certificate Authorities.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<picture>
|
||||
<source
|
||||
type="image/webp"
|
||||
srcset="
|
||||
/img/consul-connect/grid_2/grid_2_300.webp 300w,
|
||||
/img/consul-connect/grid_2/grid_2_704.webp 704w,
|
||||
/img/consul-connect/grid_2/grid_2_1256.webp 1256w"
|
||||
/>
|
||||
<source
|
||||
type="image/png"
|
||||
srcset="
|
||||
/img/consul-connect/grid_2/grid_2_300.png 300w,
|
||||
/img/consul-connect/grid_2/grid_2_704.png 704w,
|
||||
/img/consul-connect/grid_2/grid_2_1256.png 1256w"
|
||||
/>
|
||||
<img
|
||||
src="/img/consul-connect/grid_2/grid_2_1256.png"
|
||||
alt="Extend and Integrate"
|
||||
/>
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Companies Using Consul Logos */}
|
||||
<section
|
||||
id="companies-using-consul"
|
||||
className="g-section-block layout-vertical theme-light-gray large-padding"
|
||||
>
|
||||
<div className="g-container">
|
||||
<SectionHeader headline="Companies that trust Consul" />
|
||||
<div className="g-logo-grid">
|
||||
<div>
|
||||
<img
|
||||
src="/img/consul-connect/logos/logo_sap-ariba_space.svg"
|
||||
alt="SAP Ariba"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="/img/consul-connect/logos/logo_citadel_space.svg"
|
||||
alt="Citadel"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="/img/consul-connect/logos/logo_barclays_space.svg"
|
||||
alt="Barclays"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="/img/consul-connect/logos/logo_itv_space.svg"
|
||||
alt="itv"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="/img/consul-connect/logos/logo_spaceflight-industries_space.svg"
|
||||
alt="Spaceflight Industries"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="/img/consul-connect/logos/logo_lotto-nz_space.svg"
|
||||
alt="MyLotto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="home-cta-section">
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: consulLogo,
|
||||
}}
|
||||
/>
|
||||
<p className="g-type-body">
|
||||
Consul Open Source addresses the technical complexity of
|
||||
connecting services across distributed infrastructure.
|
||||
</p>
|
||||
<div>
|
||||
<a href="/downloads.html" className="button white download">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="22"
|
||||
viewBox="0 0 20 22"
|
||||
>
|
||||
<path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z" />
|
||||
</svg>
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: consulEnterpriseLogo,
|
||||
}}
|
||||
/>
|
||||
<p className="g-type-body">
|
||||
Consul Enterprise addresses the organizational complexity of
|
||||
large user bases and compliance requirements with collaboration
|
||||
and governance features.
|
||||
</p>
|
||||
<div>
|
||||
<a
|
||||
href="https://www.hashicorp.com/products/consul"
|
||||
className="button secondary white"
|
||||
>
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,449 @@
|
|||
.large-padding {
|
||||
padding: 120px 0;
|
||||
}
|
||||
|
||||
.small-padding {
|
||||
padding: 56px;
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
background: #f7f8fa !important;
|
||||
}
|
||||
|
||||
#companies-using-consul h2 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
#static-dynamic {
|
||||
& .g-section-header {
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.g-use-cases {
|
||||
margin: 48px 0 8px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
& .button {
|
||||
background: #ca2171;
|
||||
border-radius: 1px;
|
||||
box-sizing: border-box;
|
||||
color: #ffffff;
|
||||
display: inline-block;
|
||||
font-family: 'gilmer-web', 'Gilmer', Geneva, Tahoma, Helvetica, Verdana,
|
||||
sans-serif;
|
||||
font-size: 0.938rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.6em;
|
||||
margin-bottom: 4px;
|
||||
padding: 14px 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
& img {
|
||||
width: 51%;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
& h3 {
|
||||
font-weight: 600;
|
||||
margin: 40px 0 0;
|
||||
|
||||
& span {
|
||||
display: block;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
& p {
|
||||
margin-top: 0.5em;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
padding: 0 16px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
padding: 0 20px;
|
||||
width: 33.33333%;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
& + div {
|
||||
margin-top: 56px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .button {
|
||||
@media (min-width: 768px) {
|
||||
margin-top: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.g-logo-grid {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
max-width: 990px;
|
||||
text-align: center;
|
||||
|
||||
& > div {
|
||||
width: 33%;
|
||||
|
||||
& img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.g-text-asset {
|
||||
text-align: center;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
align-content: space-between;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 -20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.reverse {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
& > div:first-child > div {
|
||||
margin-left: auto;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
padding: 0 24px 0 0;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
padding-right: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.large {
|
||||
margin-bottom: -56px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
margin-bottom: -96px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
margin-bottom: -120px;
|
||||
}
|
||||
|
||||
& > div:last-child {
|
||||
justify-content: unset;
|
||||
}
|
||||
|
||||
& picture > img,
|
||||
& img {
|
||||
width: 145%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
@media (min-width: 768px) {
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
padding: 0 20px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 32px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& > div {
|
||||
@media (min-width: 768px) {
|
||||
margin-left: 0;
|
||||
max-width: 454px;
|
||||
padding: 0 0 0 24px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
& a {
|
||||
color: #1563ff;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: #2c72fe;
|
||||
|
||||
& path {
|
||||
fill: #2c72fe;
|
||||
}
|
||||
}
|
||||
|
||||
& svg {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& img,
|
||||
& picture > img {
|
||||
width: 100%;
|
||||
|
||||
&.shadow {
|
||||
box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
& > svg {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&.code-sample > div {
|
||||
box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4);
|
||||
color: var(--white);
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
& span {
|
||||
background: #252937;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||||
display: block;
|
||||
height: 32px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
& .code {
|
||||
background: #1e212a;
|
||||
overflow: auto;
|
||||
padding: 16px 24px 32px;
|
||||
width: 100%;
|
||||
|
||||
& code {
|
||||
background: #1e212a;
|
||||
border-radius: 0;
|
||||
color: var(--white);
|
||||
white-space: pre;
|
||||
|
||||
&.keyword {
|
||||
color: #be5580;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.logos {
|
||||
justify-content: center;
|
||||
|
||||
& > div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& img,
|
||||
picture {
|
||||
margin: 30px 0;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
margin: 15px 0;
|
||||
max-width: 51%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& h3 {
|
||||
margin: 0 0 16px 0;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
& i {
|
||||
list-style-type: none;
|
||||
margin: 16px;
|
||||
text-align: left;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23" height="22" viewBox="0 0 23 22"><path fill="#CA2171" d="M21.293 1.298L11 11.591 8.707 9.298a1 1 0 1 0-1.414 1.414l3 3a.997.997 0 0 0 1.414 0l11-11a1 1 0 1 0-1.414-1.414M22 10.075v.93a10.925 10.925 0 0 1-3.227 7.777A10.926 10.926 0 0 1 11 22h-.007C4.929 21.996-.003 17.058 0 10.993a10.927 10.927 0 0 1 3.226-7.776A10.927 10.927 0 0 1 10.999 0h.008c1.551 0 3.055.32 4.47.952a1 1 0 1 1-.815 1.826A8.926 8.926 0 0 0 11.006 2H11a8.938 8.938 0 0 0-6.36 2.632A8.938 8.938 0 0 0 2 10.994c-.003 4.963 4.032 9.003 8.995 9.006H11c2.401 0 4.66-.935 6.36-2.633A8.936 8.936 0 0 0 20 11.005v-.93a1 1 0 1 1 2 0"/></svg>');
|
||||
content: '';
|
||||
display: block;
|
||||
float: left;
|
||||
height: 24px;
|
||||
margin: 4px 0 0 -40px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#static-dynamic {
|
||||
& .static-callout {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
& #index-dynamic-animation {
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
|
||||
& svg {
|
||||
width: 100%;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-cta-section {
|
||||
color: var(--white);
|
||||
|
||||
@media (min-width: 768px) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 64px 24px;
|
||||
overflow: hidden;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
padding-top: 96px;
|
||||
padding-bottom: 96px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
& > svg {
|
||||
width: 135px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
background: var(--consul);
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
background: url('/img/consul-connect/mesh.svg') top center;
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0.2;
|
||||
transform: scale(1.3, 1.3);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
background: var(--gray-1);
|
||||
}
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 564px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
& div:first-child {
|
||||
height: 50px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
& p {
|
||||
flex: 1 0 auto;
|
||||
margin: 24px 0 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
background: #ca2171;
|
||||
border-radius: 1px;
|
||||
box-sizing: border-box;
|
||||
color: #ffffff;
|
||||
display: inline-block;
|
||||
font-family: 'gilmer-web', 'Gilmer', Geneva, Tahoma, Helvetica, Verdana,
|
||||
sans-serif;
|
||||
font-size: 0.938rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.6em;
|
||||
margin-bottom: 4px;
|
||||
padding: 14px 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button.white {
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.button.secondary.white {
|
||||
border: 1px solid rgba(255, 255, 255, 0.24);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(29, 30, 35, 0.2);
|
||||
color: #000000;
|
||||
padding: 13px 19px;
|
||||
}
|
||||
/* */
|
||||
|
|
@ -0,0 +1,453 @@
|
|||
import CallToAction from '@hashicorp/react-call-to-action'
|
||||
import CodeBlock from '@hashicorp/react-code-block'
|
||||
import BeforeAfterDiagram from '../../components/before-after'
|
||||
|
||||
export default function ServiceMesh() {
|
||||
return (
|
||||
<>
|
||||
<div className="consul-connect">
|
||||
<CallToAction
|
||||
heading="Service Mesh made easy"
|
||||
content="Service discovery, identity-based authorization, and L7 traffic management abstracted from application code with proxies in the service mesh pattern"
|
||||
brand="consul"
|
||||
links={[
|
||||
{ text: 'Download', url: '/downloads' },
|
||||
{
|
||||
text: 'Explore Docs',
|
||||
url:
|
||||
'https://learn.hashicorp.com/consul/getting-started/services',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<section
|
||||
id="static-dynamic"
|
||||
className="g-section-block layout-vertical theme-white-background-black-text small-padding"
|
||||
>
|
||||
<div className="g-grid-container">
|
||||
<BeforeAfterDiagram
|
||||
beforeHeading="The Challenge"
|
||||
beforeSubTitle="Network appliances, like load balancers or firewalls with manual processes, don't scale in dynamic settings to support modern applications."
|
||||
beforeImage="/img/consul-connect/svgs/segmentation-challenge.svg"
|
||||
beforeDescription="East-west firewalls use IP-based rules to secure ingress and egress traffic. But in a dynamic world where services move across machines and machines are frequently created and destroyed, this perimeter-based approach is difficult to scale as it results in complex network topologies and a sprawl of short-lived firewall rules and proxy configuration."
|
||||
afterHeading="The Solution"
|
||||
afterSubTitle="Service mesh as an automated and distributed approach to networking and security that can operate across platforms and private and public cloud"
|
||||
afterImage="/img/consul-connect/svgs/segmentation-solution.svg"
|
||||
afterDescription="Service mesh is a new approach to secure the service itself rather than relying on the network. Consul uses centrally managed service policies and configuration to enable dynamic routing and security based on service identity. These policies scale across datacenters and large fleets without IP-based rules or networking middleware."
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="g-section border-top large-padding">
|
||||
<div class="g-container">
|
||||
<div class="intro">
|
||||
<h2 class="g-type-display-2">Features</h2>
|
||||
</div>
|
||||
<div class="g-text-asset reverse">
|
||||
<div>
|
||||
<div>
|
||||
<h3 class="g-type-display-3">Layer 7 Traffic Management</h3>
|
||||
<p class="g-type-body">
|
||||
Service-to-service communication policy at Layer 7 can be
|
||||
managed centrally, enabling advanced traffic management
|
||||
patterns such as service failover, path-based routing, and
|
||||
traffic shifting that can be applied across public and
|
||||
private clouds, platforms, and networks.
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
class="learn-more g-type-buttons-and-standalone-links"
|
||||
href="/docs/connect/l7-traffic-management.html"
|
||||
>
|
||||
Learn more
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="6"
|
||||
height="10"
|
||||
viewBox="0 0 6 10"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
transform="translate(-6 -3)"
|
||||
>
|
||||
<mask id="a" fill="#fff">
|
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" />
|
||||
</mask>
|
||||
<g fill="#1563FF" mask="url(#a)">
|
||||
<path d="M0 0h16v16H0z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-sample">
|
||||
<div>
|
||||
<span></span>
|
||||
<CodeBlock
|
||||
prefix="terminal"
|
||||
code={`
|
||||
Kind = "service-splitter"
|
||||
Name = "billing-api"
|
||||
|
||||
Splits = [
|
||||
{
|
||||
Weight = 10
|
||||
ServiceSubset = "v2"
|
||||
},
|
||||
{
|
||||
Weight = 90
|
||||
ServiceSubset = "v1"
|
||||
},
|
||||
]
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="g-section border-top large-padding">
|
||||
<div class="g-container">
|
||||
<div class="g-text-asset large">
|
||||
<div>
|
||||
<div>
|
||||
<h3 class="g-type-display-3">Layer 7 Observability</h3>
|
||||
<p class="g-type-body">
|
||||
Centrally managed service observability at Layer 7 including
|
||||
detailed metrics on all service-to-service communication
|
||||
such as connections, bytes transferred, retries, timeouts,
|
||||
open circuits, and request rates, response codes.
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
class="learn-more g-type-buttons-and-standalone-links"
|
||||
href="/docs/connect/observability.html"
|
||||
>
|
||||
Learn more
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="6"
|
||||
height="10"
|
||||
viewBox="0 0 6 10"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
transform="translate(-6 -3)"
|
||||
>
|
||||
<mask id="a" fill="#fff">
|
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" />
|
||||
</mask>
|
||||
<g fill="#1563FF" mask="url(#a)">
|
||||
<path d="M0 0h16v16H0z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<picture>
|
||||
<source
|
||||
type="image/png"
|
||||
srcSet="/img/consul-connect/mesh-observability/metrics_300.png 300w, /img/consul-connect/mesh-observability/metrics_976.png 976w, /img/consul-connect/mesh-observability/metrics_1200.png 1200w"
|
||||
/>
|
||||
<img
|
||||
src="/img/consul-connect/mesh-observability/metrics_1200.png"
|
||||
alt="Metrics dashboard"
|
||||
/>
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="g-section border-top large-padding">
|
||||
<div class="g-container">
|
||||
<div class="g-text-asset reverse">
|
||||
<div>
|
||||
<div>
|
||||
<h3 class="g-type-display-3">
|
||||
Secure services across any runtime platform
|
||||
</h3>
|
||||
<p class="g-type-body">
|
||||
Secure communication between legacy and modern workloads.
|
||||
Sidecar proxies allow applications to be integrated without
|
||||
code changes and Layer 4 support provides nearly universal
|
||||
protocol compatibility.
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
class="learn-more g-type-buttons-and-standalone-links"
|
||||
href="/docs/connect/proxies.html"
|
||||
>
|
||||
Learn more
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="6"
|
||||
height="10"
|
||||
viewBox="0 0 6 10"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
transform="translate(-6 -3)"
|
||||
>
|
||||
<mask id="a" fill="#fff">
|
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" />
|
||||
</mask>
|
||||
<g fill="#1563FF" mask="url(#a)">
|
||||
<path d="M0 0h16v16H0z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<picture>
|
||||
<source
|
||||
type="image/webp"
|
||||
srcSet="
|
||||
/img/consul-connect/grid_3/grid_3_300.webp 300w,
|
||||
/img/consul-connect/grid_3/grid_3_976.webp 976w,
|
||||
/img/consul-connect/grid_3/grid_3_1256.webp 1256w"
|
||||
/>
|
||||
<source
|
||||
type="image/png"
|
||||
srcSet="
|
||||
/img/consul-connect/grid_3/grid_3_300.png 300w,
|
||||
/img/consul-connect/grid_3/grid_3_976.png 976w,
|
||||
/img/consul-connect/grid_3/grid_3_1256.png 1256w"
|
||||
/>
|
||||
<img
|
||||
src="/img/consul-connect/grid_3/grid_3_1256.png"
|
||||
alt="Secure services across any runtime platform"
|
||||
/>
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="g-section border-top large-padding">
|
||||
<div class="g-container">
|
||||
<div class="g-text-asset">
|
||||
<div>
|
||||
<div>
|
||||
<h3 class="g-type-display-3">
|
||||
Certificate-Based Service Identity
|
||||
</h3>
|
||||
<p class="g-type-body">
|
||||
TLS certificates are used to identify services and secure
|
||||
communications. Certificates use the SPIFFE format for
|
||||
interoperability with other platforms. Consul can be a
|
||||
certificate authority to simplify deployment, or integrate
|
||||
with external signing authorities like Vault.
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
class="learn-more g-type-buttons-and-standalone-links"
|
||||
href="/docs/connect/ca.html"
|
||||
>
|
||||
Learn more
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="6"
|
||||
height="10"
|
||||
viewBox="0 0 6 10"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
transform="translate(-6 -3)"
|
||||
>
|
||||
<mask id="a" fill="#fff">
|
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" />
|
||||
</mask>
|
||||
<g fill="#1563FF" mask="url(#a)">
|
||||
<path d="M0 0h16v16H0z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="logos">
|
||||
<div>
|
||||
<img src="/img/consul-connect/logos/vault.png" alt="Vault" />
|
||||
<img
|
||||
src="/img/consul-connect/logos/spiffe.png"
|
||||
alt="Spiffe"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="g-section border-top large-padding">
|
||||
<div class="g-container">
|
||||
<div class="g-text-asset reverse">
|
||||
<div>
|
||||
<div>
|
||||
<h3 class="g-type-display-3">Encrypted communication</h3>
|
||||
<p class="g-type-body">
|
||||
All traffic between services is encrypted and authenticated
|
||||
with mutual TLS. Using TLS provides a strong guarantee of
|
||||
the identity of services communicating, and ensures all data
|
||||
in transit is encrypted.
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
class="learn-more g-type-buttons-and-standalone-links"
|
||||
href="/docs/connect/security.html"
|
||||
>
|
||||
Learn more
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="6"
|
||||
height="10"
|
||||
viewBox="0 0 6 10"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
transform="translate(-6 -3)"
|
||||
>
|
||||
<mask id="a" fill="#fff">
|
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" />
|
||||
</mask>
|
||||
<g fill="#1563FF" mask="url(#a)">
|
||||
<path d="M0 0h16v16H0z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-sample">
|
||||
<div>
|
||||
<span></span>
|
||||
<CodeBlock
|
||||
prefix="terminal"
|
||||
code={`
|
||||
$ consul connect proxy -service web \\
|
||||
-service-addr 127.0.0.1:8000
|
||||
-listen 10.0.1.109:7200
|
||||
==> Consul Connect proxy starting...
|
||||
Configuration mode: Flags
|
||||
Service: web
|
||||
Public listener: 10.0.1.109:7200 => 127.0.0.1:8000
|
||||
...
|
||||
$ tshark -V \\
|
||||
-Y "ssl.handshake.certificate" \\
|
||||
-O "ssl" \\
|
||||
-f "dst port 7200"
|
||||
Frame 39: 899 bytes on wire (7192 bits), 899 bytes captured (7192 bits) on interface 0
|
||||
Internet Protocol Version 4, Src: 10.0.1.110, Dst: 10.0.1.109
|
||||
Transmission Control Protocol, Src Port: 61918, Dst Port: 7200, Seq: 136, Ack: 916, Len: 843
|
||||
Secure Sockets Layer
|
||||
TLSv1.2 Record Layer: Handshake Protocol: Certificate
|
||||
Version: TLS 1.2 (0x0303)
|
||||
Handshake Protocol: Certificate
|
||||
RDNSequence item: 1 item (id-at-commonName=Consul CA 7)
|
||||
RelativeDistinguishedName item (id-at-commonName=Consul CA 7)
|
||||
Id: 2.5.4.3 (id-at-commonName)
|
||||
DirectoryString: printableString (1)
|
||||
printableString: Consul CA 7
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="g-section border-top large-padding">
|
||||
<div class="g-container">
|
||||
<div class="g-text-asset">
|
||||
<div>
|
||||
<div>
|
||||
<h3 class="g-type-display-3">Mesh Gateway</h3>
|
||||
<p class="g-type-body">
|
||||
Connect between different cloud regions, VPCs and between
|
||||
overlay and underlay networks without complex network
|
||||
tunnels and NAT. Mesh Gateways solve routing at TLS layer
|
||||
while preserving end-to-end encryption and limiting attack
|
||||
surface area at the edge of each network.
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
class="learn-more g-type-buttons-and-standalone-links"
|
||||
href="/docs/connect/mesh_gateway.html"
|
||||
>
|
||||
Learn more
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="6"
|
||||
height="10"
|
||||
viewBox="0 0 6 10"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
transform="translate(-6 -3)"
|
||||
>
|
||||
<mask id="a" fill="#fff">
|
||||
<path d="M7.138 3.529a.666.666 0 1 0-.942.942l3.528 3.53-3.529 3.528a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z" />
|
||||
</mask>
|
||||
<g fill="#1563FF" mask="url(#a)">
|
||||
<path d="M0 0h16v16H0z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<picture>
|
||||
<img
|
||||
src="/img/consul-connect/mesh-gateway/gateway_1200.png"
|
||||
alt="Mesh gateway diagram"
|
||||
/>
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="g-section g-cta-section large-padding">
|
||||
<div>
|
||||
<h2 class="g-type-display-2">Ready to get started?</h2>
|
||||
<a href="/downloads.html" class="button download white">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="22"
|
||||
viewBox="0 0 20 22"
|
||||
>
|
||||
<path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z" />
|
||||
</svg>
|
||||
Download
|
||||
</a>
|
||||
<a
|
||||
href="https://learn.hashicorp.com/consul/getting-started/services"
|
||||
class="button secondary white"
|
||||
>
|
||||
Explore docs
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -31,19 +31,29 @@
|
|||
@import '~@hashicorp/react-enterprise-alert/dist/style.css';
|
||||
@import '~@hashicorp/react-mega-nav/style.css';
|
||||
@import '~@hashicorp/react-docs-page/style.css';
|
||||
@import '~@hashicorp/react-section-header/dist/style.css';
|
||||
@import '~@hashicorp/react-call-to-action/dist/style.css';
|
||||
@import '~@hashicorp/react-case-study-slider/dist/style.css';
|
||||
@import '~@hashicorp/react-code-block/dist/style.css';
|
||||
|
||||
/* Local Components */
|
||||
@import '../components/footer/style.css';
|
||||
@import '../components/before-after/style.css';
|
||||
|
||||
/* Local Pages */
|
||||
@import './downloads/style.css';
|
||||
@import './community/style.css';
|
||||
@import './home/style.css';
|
||||
@import './discovery/style.css';
|
||||
|
||||
/* Print Styles */
|
||||
@import './print.css';
|
||||
|
||||
/* Misc Styles */
|
||||
@import './button.css';
|
||||
|
||||
/* Sticky Footer */
|
||||
.content {
|
||||
footer .content {
|
||||
min-height: calc(100vh - 260px);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" fill="#fff" stroke="#E80134"/><path d="M12 8v4" stroke="#E80134"/><circle cx="12" cy="16" r="1" fill="#E80134"/></svg>
|
||||
|
After Width: | Height: | Size: 277 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 23C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11-4.925 11-11 11z" fill="#000" stroke="#000"/><path d="M16.666 9.082l-6.416 6.417-2.917-2.917" stroke="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 257 B |
Loading…
Reference in New Issue