474 lines
20 KiB
JavaScript
474 lines
20 KiB
JavaScript
import LearnCallout from '@hashicorp/react-learn-callout'
|
||
import SteppedFeatureList from '@hashicorp/react-stepped-feature-list'
|
||
import TextSplitWithImage from '@hashicorp/react-text-split-with-image'
|
||
import CodeBlock from '@hashicorp/react-code-block'
|
||
import UseCases from '@hashicorp/react-use-cases'
|
||
import CalloutBlade from 'components/callout-blade'
|
||
import CaseStudyCarousel from 'components/case-study-carousel'
|
||
import HomepageHero from 'components/homepage-hero'
|
||
import StaticDynamicDiagram from 'components/static-dynamic-diagram'
|
||
import highlightString from '@hashicorp/platform-code-highlighting/highlight-string'
|
||
|
||
export default function HomePage({ serviceMeshIngressGatewayCode }) {
|
||
return (
|
||
<div className="p-home">
|
||
<HomepageHero
|
||
alert={{
|
||
url: 'https://www.hashicorp.com/blog/announcing-hashicorp-consul-api-gateway',
|
||
text: 'Introducing the Consul API Gateway',
|
||
tag: 'Blog',
|
||
}}
|
||
title="Service Mesh for any runtime or cloud"
|
||
description="Consul automates networking for simple and secure application delivery."
|
||
links={[
|
||
{
|
||
external: false,
|
||
title: 'Try HCP Consul',
|
||
url:
|
||
'https://portal.cloud.hashicorp.com/sign-up?utm_source=consul_io&utm_content=consul_hero',
|
||
},
|
||
{
|
||
external: false,
|
||
title: 'Get Started',
|
||
url: 'https://learn.hashicorp.com/consul',
|
||
},
|
||
]}
|
||
uiVideo={{
|
||
name: 'UI',
|
||
playbackRate: 2,
|
||
srcType: 'mp4',
|
||
url: 'https://www.datocms-assets.com/2885/1621637919-consul-ui.mp4',
|
||
}}
|
||
cliVideo={{
|
||
name: 'CLI',
|
||
playbackRate: 2,
|
||
srcType: 'mp4',
|
||
url: 'https://www.datocms-assets.com/2885/1621637930-consul-cli.mp4',
|
||
}}
|
||
/>
|
||
<StaticDynamicDiagram
|
||
heading="Service-based networking for dynamic infrastructure"
|
||
diagrams={{
|
||
beforeHeadline: 'Static Infrastructure',
|
||
// @TODO - Convert to a slot w/ JSX markup
|
||
beforeContent:
|
||
'<p class="g-type-body-small">Private datacenters with static IPs, primarily north-south traffic, protected by perimeter security and coarse-grained network segments.</p>\n' +
|
||
'<h4 class="g-type-label"><a class="__permalink-h" href="#traditional-approach" aria-label="traditional approach permalink">»</a><a class="__target-h" id="traditional-approach" aria-hidden></a>Traditional Approach</h4>\n' +
|
||
'<ul>\n' +
|
||
'<li class="g-type-body-small">Static connectivity between services</li>\n' +
|
||
'<li class="g-type-body-small">A fleet of load balancers to route traffic</li>\n' +
|
||
'<li class="g-type-body-small">Ticket driven processes to update network middleware</li>\n' +
|
||
'<li class="g-type-body-small">Firewall rule sprawl to constrict access and insecure flat network zones</li>\n' +
|
||
'</ul>',
|
||
beforeImage: {
|
||
url:
|
||
'https://www.datocms-assets.com/2885/1559693517-static-infrastructure.png',
|
||
alt: 'Static Infrastructure',
|
||
},
|
||
afterHeadline: 'Dynamic Infrastructure',
|
||
// @TODO - Convert to a slot w/ JSX markup
|
||
afterContent:
|
||
'<p class="g-type-body-small">Multiple clouds and private datacenters with dynamic IPs, ephemeral containers, dominated by east-west traffic, no clear network perimeters.</p>\n' +
|
||
'<h4 class="g-type-label"><a class="__permalink-h" href="#consul-approach" aria-label="consul approach permalink">»</a><a class="__target-h" id="consul-approach" aria-hidden></a>Consul Approach</h4>\n' +
|
||
'<ul>\n' +
|
||
'<li class="g-type-body-small">Centralized registry to locate any service</li>\n' +
|
||
'<li class="g-type-body-small">Services discovered and connected with centralized policies</li>\n' +
|
||
'<li class="g-type-body-small">Network automated in service of applications</li>\n' +
|
||
'<li class="g-type-body-small">Zero trust network enforced by identity-based security policies</li>\n' +
|
||
'</ul>',
|
||
afterImage: {
|
||
url:
|
||
'https://www.datocms-assets.com/2885/1559693545-dynamic-infrastructure-4x.png',
|
||
alt: 'Dynamic Infrastructure',
|
||
},
|
||
}}
|
||
/>
|
||
|
||
<div className="use-cases g-grid-container">
|
||
<h2 className="g-type-display-2">Why Consul?</h2>
|
||
<UseCases
|
||
items={[
|
||
{
|
||
title: 'Microservice Based Networking',
|
||
description:
|
||
'Simplify developer interactions, improve observability, and enable robust traffic management with Consul service mesh.',
|
||
image: {
|
||
url: require('./img/use-cases/service_mesh.svg?url'),
|
||
format: 'svg',
|
||
},
|
||
link: {
|
||
title: 'Service Mesh',
|
||
url: '/use-cases/multi-platform-service-mesh',
|
||
},
|
||
},
|
||
{
|
||
title: 'Secure Service-to-Service Access',
|
||
description:
|
||
'Secure service access and communication across any network with identity-driven, time-based controls.',
|
||
image: {
|
||
url: require('./img/use-cases/discovery_health_checking.svg?url'), // @TODO - Consider a more specific icon
|
||
format: 'svg',
|
||
},
|
||
link: {
|
||
title: 'Zero Trust Networks',
|
||
url: '/use-cases/service-discovery-and-health-checking',
|
||
},
|
||
},
|
||
{
|
||
title: 'Automated Networking Tasks',
|
||
description:
|
||
'Cut down on tickets for operators and speed up time to deployment of dynamic applications.',
|
||
image: {
|
||
url: require('./img/use-cases/network_automation.svg?url'),
|
||
format: 'svg',
|
||
},
|
||
link: {
|
||
title: 'Network Infrastructure Automation',
|
||
url: '/use-cases/network-infrastructure-automation',
|
||
},
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<CalloutBlade
|
||
title="Deploy Consul Service mesh for Kubernetes, VMs, or any environment"
|
||
callouts={[
|
||
{
|
||
icon: require('./img/kubernetes/logo.svg?include'),
|
||
title: 'Consul on Kubernetes',
|
||
description:
|
||
'Consul service mesh works on any Kubernetes distribution, connects multiple clusters, and supports VM-based applications. Consul CRDs provide a self-service, Kubernetes native workflow to manage traffic patterns and permissions in the mesh.',
|
||
link: {
|
||
text: 'Learn more',
|
||
url: '/consul-on-kubernetes',
|
||
},
|
||
},
|
||
{
|
||
icon: require('./img/kubernetes/communication-arrows.svg?include'),
|
||
title: 'Consul for Everything Else',
|
||
description:
|
||
"Consul service mesh support multiple orchestrators, like Nomad and Amazon ECS. Not using service mesh? Consul's service discovery and network infrastructure automation capabilities can help solve any service networking challenge.",
|
||
eyebrow: 'Tutorial',
|
||
link: {
|
||
text: 'Get Started with Service Mesh on VMs',
|
||
url:
|
||
'https://learn.hashicorp.com/tutorials/consul/service-mesh-deploy-vms?in=consul/developer-mesh',
|
||
},
|
||
},
|
||
]}
|
||
/>
|
||
<div className="ecosystem g-grid-container">
|
||
<h2 className="g-type-display-2">Consul Ecosystem</h2>
|
||
<TextSplitWithImage
|
||
textSplit={{
|
||
product: 'consul',
|
||
heading: 'The Single Control Plane for Cloud Networks',
|
||
content:
|
||
'Consul provides the control plane for multi-cloud networking.',
|
||
checkboxes: [
|
||
'Centrally control the distributed data plane to provide a scalable and reliable service mesh',
|
||
'Automate centralized network middleware configuration to avoid human intervention',
|
||
'Provide a real-time directory of all running services to improve application inventory management',
|
||
'Enable visibility into services and their health status to enhance health and performance monitoring',
|
||
'Automate lifecycle management of certificates which can be issued by 3rd party Certificate Authority',
|
||
'Provide unified support across a heterogeneous environment with different workload types and runtime platforms',
|
||
],
|
||
linkStyle: 'links',
|
||
links: [
|
||
{
|
||
type: 'outbound',
|
||
text: 'Explore Consul Integrations',
|
||
url: 'https://www.hashicorp.com/integrations/?filters=consul',
|
||
},
|
||
],
|
||
}}
|
||
image={{
|
||
url:
|
||
'https://www.datocms-assets.com/2885/1622152328-control-plane.png',
|
||
alt: 'Consul control plane',
|
||
}}
|
||
/>
|
||
</div>
|
||
<section className="features">
|
||
<div className="g-grid-container">
|
||
<h3 className="g-type-display-2">Features</h3>
|
||
<SteppedFeatureList
|
||
features={[
|
||
{
|
||
title: 'Secure Service to Service Connectivity',
|
||
description:
|
||
'Use mTLS to authenticate and secure connections between services.',
|
||
learnMoreLink:
|
||
'https://learn.hashicorp.com/collections/consul/service-mesh-security',
|
||
content: (
|
||
<img
|
||
src={require('./img/service-to-service-transparent.png')}
|
||
alt="Service to Service Connectivity"
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
title: 'Enhanced Observability',
|
||
description:
|
||
'Visualize the service mesh topology with Consul’s built-in UI or third-party APM solutions.',
|
||
learnMoreLink:
|
||
'https://learn.hashicorp.com/collections/consul/service-mesh-observability',
|
||
content: (
|
||
<img
|
||
src={require('../use-cases/img/multi-platform-service-mesh/observability@3x.png')}
|
||
alt="Enhanced Observability"
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
title: 'Layer 7 Traffic Management',
|
||
description:
|
||
'Implement fine-grained traffic policies to route and split traffic across services.',
|
||
learnMoreLink:
|
||
'https://learn.hashicorp.com/collections/consul/service-mesh-traffic-management',
|
||
content: (
|
||
<img
|
||
src={require('./img/service-splitter@2x.png')}
|
||
alt="Layer 7 Traffic Management"
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
title: 'Multi-platform Support',
|
||
description:
|
||
'Consul service mesh can be deployed in any environment and supports multiple runtimes, like Kubernetes, Nomad, and VMs.',
|
||
learnMoreLink:
|
||
'https://learn.hashicorp.com/collections/consul/gs-consul-service-mesh',
|
||
content: (
|
||
<center>
|
||
<img
|
||
style={{ maxWidth: '75%' }}
|
||
src={require('../use-cases/img/multi-platform-service-mesh/kubernetes-extend-transparent.png')}
|
||
alt="Multi-platform Support"
|
||
/>
|
||
</center>
|
||
),
|
||
},
|
||
{
|
||
title: 'Dynamic Load Balancing & Firewalling',
|
||
description:
|
||
'Automate manual networking tasks and reduce the reliance on ticket-based systems.',
|
||
learnMoreLink:
|
||
'https://learn.hashicorp.com/collections/consul/network-infrastructure-automation',
|
||
content: (
|
||
<img
|
||
src={require('../use-cases/img/network-automation/load-balancing.png')}
|
||
alt="Load Balancing & Firewalling"
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
title: 'Simple Cross Datacenter Networking',
|
||
description:
|
||
'Use mesh gateways to connect services across datacenters with Consul service mesh.',
|
||
learnMoreLink:
|
||
'https://learn.hashicorp.com/tutorials/consul/service-mesh-gateways?in=consul/developer-mesh',
|
||
content: (
|
||
<img
|
||
src={require('./img/multi-datacenter-transparent.png')}
|
||
alt="Cross Datacenter Networking"
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
title: 'Service Discovery & Real-time Health Checks',
|
||
description:
|
||
'Keep track of the location information and health status of all applications.',
|
||
learnMoreLink:
|
||
'https://learn.hashicorp.com/collections/consul/developer-discovery',
|
||
content: (
|
||
<img
|
||
src={require('../use-cases/img/discovery-health-checking/service-discovery-and-health-checking.svg')}
|
||
alt="Service Discovery & Real-time Health Checks"
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
title: 'Bridging Service Mesh with Traditional Networks',
|
||
description:
|
||
'Interact with applications that reside outside of the mesh with Consul’s terminating gateways.',
|
||
learnMoreLink:
|
||
'https://learn.hashicorp.com/tutorials/consul/terminating-gateways-connect-external-services',
|
||
content: (
|
||
<img
|
||
src={require('./img/extend-mesh-transparent.png')}
|
||
alt="Service Mesh with Traditional Networks"
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
title: 'Connect new services into Service Mesh',
|
||
description:
|
||
'Enable external applications to securely connect with service inside of the mesh using Consul’s Ingress Gateway.',
|
||
learnMoreLink:
|
||
'https://learn.hashicorp.com/tutorials/consul/service-mesh-ingress-gateways',
|
||
content: (
|
||
<CodeBlock
|
||
language="yaml"
|
||
code={serviceMeshIngressGatewayCode}
|
||
/>
|
||
),
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
</section>
|
||
<CalloutBlade
|
||
title="Better Together: Consul and the HashiCorp Stack"
|
||
callouts={[
|
||
{
|
||
title: 'Automated Infrastructure with Terraform',
|
||
icon: require('./img/stack/consul-and-terraform.svg?include'),
|
||
description:
|
||
'Speed up time to delivery for services with network infrastructure automation. Use Consul as a single source of truth for all services and apply configuration changes with Terraform.',
|
||
link: {
|
||
text: 'Consul with Terraform',
|
||
url:
|
||
'https://learn.hashicorp.com/tutorials/consul/consul-terraform-sync-intro?in=consul/network-infrastructure-automation',
|
||
},
|
||
},
|
||
{
|
||
title: 'Defense in Depth with Vault',
|
||
icon: require('./img/stack/consul-and-vault.svg?include'),
|
||
description:
|
||
'Ensure complete security for service-to-service access, authorization and communication by using Consul and Vault. Deliver end-to-end authentication, authorization, and encryption using identity-based access controls and traffic policies for microservice architectures. ',
|
||
link: {
|
||
text: 'Consul with Vault',
|
||
url:
|
||
'https://learn.hashicorp.com/collections/consul/vault-secure',
|
||
},
|
||
},
|
||
{
|
||
title: 'Application Delivery with Nomad',
|
||
icon: require('./img/stack/consul-and-nomad.svg?include'),
|
||
description:
|
||
'Accelerate the application delivery lifecycle with orchestration and scheduling from Nomad and Consul service mesh. Enable developers to deploy and connect workloads in any environment with fewer code changes.',
|
||
link: {
|
||
text: 'Consul with Nomad',
|
||
url:
|
||
'https://learn.hashicorp.com/collections/nomad/integrate-consul',
|
||
},
|
||
},
|
||
]}
|
||
/>
|
||
|
||
<CaseStudyCarousel
|
||
title="Trusted by startups and the world’s largest organizations"
|
||
caseStudies={[
|
||
{
|
||
quote:
|
||
'Consul lets us spread more than 200 microservices over several AKS clusters. Each AKS cluster feeds into a Consul cluster that forms a larger service discovery mesh that allows us to find and connect services in a matter of minutes.',
|
||
caseStudyURL: 'https://www.hashicorp.com/case-studies/mercedes/',
|
||
person: {
|
||
firstName: 'Sriram',
|
||
lastName: 'Govindarajan',
|
||
photo:
|
||
'https://www.datocms-assets.com/2885/1589431834-sriram-govindarajan.jpg',
|
||
title: 'Principal Infrastructure Engineer',
|
||
},
|
||
company: {
|
||
name: 'Mercedes-Benz Research & Development (MBRDNA)',
|
||
logo: require('./img/quotes/mercedes-logo.svg?url'),
|
||
},
|
||
},
|
||
{
|
||
quote:
|
||
'Consul has fully replaced our manual service discovery activities with automated workflows and we’ve repurposed as much as 80% of our Consul staff to other projects because the tool is so reliable, efficient, and intelligent.',
|
||
caseStudyURL:
|
||
'https://www.hashicorp.com/resources/criteo-containers-consul-connect/',
|
||
person: {
|
||
firstName: 'Pierre',
|
||
lastName: 'Souchay',
|
||
photo:
|
||
'https://www.datocms-assets.com/2885/1589431828-pierre-souchay.jpg',
|
||
title: 'Discovery and Security Authorization Lead',
|
||
},
|
||
company: {
|
||
name: 'Criteo',
|
||
logo: require('./img/quotes/criteo-logo.svg?url'),
|
||
},
|
||
},
|
||
]}
|
||
logoSection={{
|
||
grayBackground: true,
|
||
featuredLogos: [
|
||
{
|
||
companyName: 'Mercedes-Benz Research & Development (MBRDNA)',
|
||
url: require('./img/quotes/mercedes-logo.svg?url'),
|
||
},
|
||
{
|
||
companyName: 'Criteo',
|
||
url: require('./img/quotes/criteo-logo.svg?url'),
|
||
},
|
||
{
|
||
companyName: 'Barclays',
|
||
url: require('./img/quotes/barclays-logo.svg?url'),
|
||
},
|
||
{
|
||
companyName: 'Citadel',
|
||
url: require('./img/quotes/citadel-logo.svg?url'),
|
||
},
|
||
{
|
||
companyName: 'Ample Organics',
|
||
url:
|
||
'https://www.datocms-assets.com/2885/1589354369-ample-organics-logo.png?w=600',
|
||
},
|
||
],
|
||
}}
|
||
/>
|
||
|
||
<LearnCallout
|
||
headline="Learn the latest Consul skills"
|
||
product="consul"
|
||
background=""
|
||
items={[
|
||
{
|
||
title: 'Service Mesh on Kubernetes',
|
||
category: 'For Kubernetes',
|
||
time: '3 hr 20 min',
|
||
link: 'https://learn.hashicorp.com/collections/consul/kubernetes',
|
||
image:
|
||
'https://www.datocms-assets.com/2885/1600191254-hashicorp-icon.svg',
|
||
},
|
||
{
|
||
title: 'HashiCorp Cloud Platform (HCP) Consul',
|
||
category: 'Get Started',
|
||
time: '59 mins',
|
||
link:
|
||
'https://learn.hashicorp.com/collections/consul/cloud-get-started',
|
||
image:
|
||
'https://www.datocms-assets.com/2885/1600191254-hashicorp-icon.svg',
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export async function getStaticProps() {
|
||
const rawYaml = `
|
||
apiVersion: consul.hashicorp.com/v1alpha1
|
||
kind: IngressGateway
|
||
metadata:
|
||
name: ingress-gateway
|
||
spec:
|
||
listeners:
|
||
- port: 8080
|
||
protocol: http
|
||
services:
|
||
- name: static-server
|
||
`
|
||
const serviceMeshIngressGatewayCode = await highlightString(rawYaml, 'yaml')
|
||
return {
|
||
props: {
|
||
serviceMeshIngressGatewayCode,
|
||
},
|
||
}
|
||
}
|