Wednesday, September 26, 2018

How to Set Up a Reverse NGINX Proxy on Alibaba Cloud

This article was created in partnership with Alibaba Cloud. Thank you for supporting the partners who make SitePoint possible.

Think you got a better tip for making the best use of Alibaba Cloud services? Tell us about it and go in for your chance to win a Macbook Pro (plus other cool stuff). Find out more here.

Need to serve many websites from a single Linux box, optimizing resources, and automating the site launch process? Let’s get serious then, and set up a production-ready environment using Ubuntu, NGINX, and Docker — all of it on Alibaba Cloud.

This is a somewhat advanced tutorial, and we'll assume some knowledge of networking, server administration, and software containers.

Understanding the Scenario

If you are looking at this guide, chances are that you need to manage a cluster of servers, or an increasing number of websites — if not both — and are looking at what your options are for a secure, performant, and flexible environment. Well then, you came to the right place!

Why a Reverse Proxy

In a nutshell, a reverse proxy takes a request from a client (normally from the Internet), forwards it to a server that can fulfill it (normally on an Intranet), and finally returns the server's response back to the client.

Reverse proxy

Those making requests to the proxy may not be aware of the internal network.

It is, in a way, similar to a load balancer — but implementing a load balancer only makes sense when you have multiple servers. You can deploy a reverse proxy with just one web server, and this can be particularly useful when there are different configuration requirements behind those end servers. So the reverse proxy is the "public face" sitting at the edge of the app's network, handling all of the requests.

There are some benefits to this approach:

  • Performance. A number of web acceleration techniques that can be implemented, including:
    • Compression: server responses can be compressed before returning them to the client to reduce bandwidth.
    • SSL termination: decrypting requests and encrypting responses can free up resources on the back-end, while securing the connection.
    • Caching: returning stores copies of content for when the same request is placed by another client, can decrease response time and load on the back-end server.
  • Security. Malicious clients cannot directly access your web servers, with the proxy effectively acting as an additional defense; and the number of connections can be limited, minimizing the impact of distributed denial-of-service (DDoS) attacks.
  • Flexibility. A single URL can be the access point to multiple servers, regardless of the structure of the network behind them. This also allows requests to be distributed, maximizing speed and preventing overload. Clients also only get to know the reverse proxy's IP address, so you can transparently change the configuration for your back-end as it better suits your traffic or architecture needs.

Why NGINX

NGINX logo

NGINX Plus and NGINX are the best-in-class reverse-proxy solutions used by high-traffic websites such as Dropbox, Netflix, and Zynga. More than 287 million websites worldwide, including the majority of the 100,000 busiest websites, rely on NGINX Plus and NGINX to deliver their content quickly, reliably, and securely.

What Is a Reverse Proxy Server? by NGINX.

Apache is great and probably best for what it's for — a multi-purpose web server, all batteries included. But because of this very reason, it can be more resource hungry as well. Also, Apache is multi-threaded even for single websites, which is not a bad thing in and of itself, especially for multi-core systems, but this can add a lot of overhead to CPU and memory usage when hosting multiple sites.

Tweaking Apache for performance is possible, but it takes savvy and time. NGINX takes the opposite approach in its design — a minimalist web server that you need to tweak in order to add more features in, which to be fair, also takes some savvy. If the topic interests you, a well-established hosting company wrote an interesting piece comparing the two: Apache vs NGINX: Practical Considerations.

In short, NGINX beats Apache big time out-of-the-box performance and resource consumption-wise. For a single site you can chose not to even care, on a cluster or when hosting a many sites, NGINX will surely make a difference.

Why Alibaba Cloud

Alibaba Cloud logo

Part of the Alibaba Group (Alibaba.com, AliExpress), Alibaba Cloud has been around for nearly a decade at the time of this writing. It is China's largest public cloud service provider, and the third of the world; so it isn't exactly a "new player" in the cloud services arena.

However, it hasn't been until somewhat recently that Alibaba rebranded its Aliyun cloud services company and put together a fully comprehensive set of products and services, and decidedly stepped out of the Chinese and Asian markets to dive into the "Western world".

On a Side-by-Side Comparison of AWS, Google Cloud and Azure, we did a full review of what you can do in the cloud — elastic computing, database services, storage and CDN, application service, domain and website, security, networking, analytics, ... and yes, Alibaba Cloud covers it all.

Deploying to Alibaba Cloud

You'll need an Alibaba Cloud account before you can set up your Linux box. And the good news is that you can get one for free! For the full details see How to Sign Up and Get Started.

For this guide will use Ubuntu Linux, so you can see the How to Set Up Your First Ubuntu 16.04 Server on Alibaba Cloud) guide. Mind you, you could use Debian, CentOS, and in fact, you can go ahead and check 3 Ways to Set Up a Linux Server on Alibaba Cloud.

Once you get your Alibaba Cloud account and your Linux box is up and running, you're good to go.

Hands On!

Installing NGINX

If we wanted to use the whole process ourselves, we would first need to install NGINX.

On Ubuntu we'd use the following commands:

$ sudo apt-get update
$ sudo apt-get install nginx

And you can check the status of the web server with systemctl:

$ systemctl status nginx    

With systemctl you can also stop/start/restart the server, and enable/disable the launch of NGINX at boot time.

These are the two main directories of interest for us:

  • /var/www/html NGINX default website location.
  • /etc/nginx NGINX configuration directory.

Now, setting a reverse proxy can be a somewhat cumbersome enterprise (and there are several guides that cover this process), as there are a number of network settings we need to go through, and files we need to update as we add sites/nodes behind our proxy.

That is, of course, unless we automate the whole thing using software containers...

Docker to the Rescue

Before we can start using software containers to automate our workflow, we first we need to install Docker, which for Ubuntu is a fairly straight forward process.

Uninstall any old version:

$ sudo apt-get remove docker docker-engine docker.io

Install the latest Docker CE version:

$ sudo apt-get update
$ sudo apt-get install docker-ce

If you want to install a specific Docker version, or set up the Docker repository, see Get Docker CE for Ubuntu.

Setting the Network

Part of setting a reverse proxy infrastructure is properly setting networking rules.

So let's create a network with Docker:

$ docker network create nginx-proxy

And believe or not, the network is set!

NGINX-Proxy!

Now that we have Docker running on our Ubuntu server, we can streamline the process of installing, setting up the reverse proxy, and launching new sites.

Jason Wilder did an awesome job putting together a Docker image that does exactly that--jwilder/nginx-proxy, a automated NGINX proxy for Docker containers using docker-gen, that works perfectly out-of-the-box.

Here's how you can run the proxy:

$ docker run -d -p 80:80 -p 443:443 --name nginx-proxy --net nginx-proxy -v /var/run/docker.sock:/tmp/docker.sock:ro jwilder/nginx-proxy

Essentially:

  • we told Docker to run NGINX as a daemon/service (-d),
  • mapped the proxy's HTTP and HTTPS ports (80 and 443) the web server(s) ports behind it (-p 80:80 -p 443:443),
  • named the NGINX proxy for future reference (--name nginx-proxy),
  • used the network we previously set (--net nginx-proxy),
  • mapped the UNIX socket that Docker daemon is listening to, to use it across the network (-v /var/run/docker.sock:/tmp/docker.sock:ro).

And believe or not, the NGINX reverse proxy is up and running!

Launching Sites, Lots of Sites

Normally when using Docker you would launch a "containerized" application, being a standard WordPress site, a specific Moodle configuration, or your own images with your own custom apps.

Launching a proxied container now is as easy as specifying the virtual your domain with VIRTUAL_HOST=subdomain.yourdomain.com:

The post How to Set Up a Reverse NGINX Proxy on Alibaba Cloud appeared first on SitePoint.


by Lucero del Alba via SitePoint

The Complete Guide to Lazy Loading Images

#359 — September 26, 2018

Read on the Web

Frontend Focus

Trix 1.0: A Rich Text Editor for the Web — A WYSIWYG editor developed by the folks at Basecamp and creators of Ruby on Rails. 1.0 has just dropped and introduces support for image galleries.

Basecamp

The Complete Guide to Lazy Loading Images — If you want your pages to load and render faster, you can ‘lazy load’ your images so that they slot into place later in the process. This article introduces the concept and some different ways to achieve it.

Rahul Nanwani

Cheat Sheet: Functional Programming with JavaScript — JavaScript developers, here’s a handy resource for your reference stack. This cheat sheet structures some of the language features most commonly used by JavaScript developers interested in writing functional style code. Check it out.

Progress Kendo UI sponsor

The Importance of Manual Accessibility Testing — It’s great to automate your accessibility testing to get the most persistent feedback possible, but they need to work alongside manual tests as part of a larger testing process.

Eric Bailey

How to Build an Energy-Efficient, Low-Tech Website — An interesting look at what’s involved in making a Web site as efficient as possible, right down to running a low power Web server off a solar panel and dithering images to make them less resource-intensive.

LOW←TECH MAGAZINE

What is Modular CSS? — A detailed explanation of modular CSS, a collection of principles (that originated at Yahoo and Yandex) for writing code that is maintainable at scale.

Scott Vandehey

Legacy WebAudio Content Will Break (Again) in Chrome 70 — If you’ve got any older Web Audio API code floating around out there, you might want to keep an eye on this issue.

Hacker News

💻 Jobs

Sr. Front End Engineer - Web Animations (San Diego/Remote) — You enjoy finding cool designs on Dribbble and making them a reality. You have an online profile with some rad CSS and JS animations.

MJD Interactive

Try Vettery — Create a profile to connect with inspiring companies seeking FrontEnd devs.

Vettery

📘 Tutorials

Having Fun with Link Hover Effects — A collection of unconventional CSS hover link styles (e.g. if you hover over a link, the underline ‘wiggles’).

Geoff Graham

Accurately Measuring Layout on the Web — A good read if you want to beef up your browser rendering performance knowledge and understand how the structure of code affects how quickly pages render.

Nolan Lawson

Learn to Use Layered Architectures, Design Patterns and Application Frameworks — Online and evening M.S. in Software Engineering program. Advanced understanding of Java™, C#, HTML, CSS, JavaScript & more.

Regis University sponsor

Stacking Contexts, or Putting Things on Top of Other Things on the Web — A stacking context is an element whose children can be ordered three-dimensionally within the parent with no external elements getting involved in-between.

Isabel Brison

Demystifying the Service Worker Lifecycle

Chimezie Enyinnaya

Converting a WebGL Application to WebVR — Research engineer Manish Goregaokar shares what he’s learned (and some of the code he wrote) whilst porting a WebGL application to WebVR.

Mozilla Hacks

5 Reasons Why You Might Want to Join Us for SIGNAL on Oct 17 & 18

Twilio sponsor

Don't Use Empty or Low Content for Your Design System Grid Examples — Depending on what units your grid measurements use, the presence of text could impact how your grid layout works as seen in this extreme example.

Chris Coyier

🔧 Code and Tools

Refresh CSS Bookmarklet v2 — Lea Verou has updated a classic bookmarklet (originally developed by Paul Irish) that refreshes all stylesheets on the current page, now including those in IFRAMEs too.

Lea Verou

Feature Queries Manager: Toggle CSS Styles Within @supports Blocks — A tool for testing out your feature queries.

Ire Aderinokun

Two Days of Practical Talks on Frontend, UX & Design. Get 100 USD Off

SMASHINGCONF NYC sponsor

Tabulator: A Fully Featured, Interactive Table JavaScript Library — Create interactive data tables quickly from any HTML table or JavaScript or JSON data source.

Oli Folkerd

T-Writer: A Native 'Typewriter Effect' Library — If you want to reproduce the effect of text being typed in real time.

Christopher Cavalea


by via Frontend Focus

Trix

Neat One Page website announcing Trix 1.0 – the WYSIWYG editor powering all textareas in Basecamp. The impressive rich text editor is actually beautifully integrated within the Single Page website where you can give it a spin right there.

Full Review | Direct Link


by Rob Hope @robhope via One Page Love

Raygun APM: Annihilate Performance Issues

What (exactly) is a One Page website?

 

Since 2008 I’ve added over 7000 One Page website references to the One Page Love gallery. So what exactly is a One Page website?

A One Pager is a Single Page website with no additional pages like About, Team or Services. All the content sits within the same webpage, traditionally in a long-scrolling layout.

See the beauty of a One Page website is it tries to promote one thing in an uncluttered, direct manner. This allows the visitor to make a quicker decision vs sending them to a bloated website with many options.

Now when a One Page website encourages an action it also becomes a Landing Page – where the objective can be to download, a SaaS sign up, join a newsletter or even an commerce transaction. These successful actions are known as Conversions.

Lastly, to not clutter the user experience and focus on that sweet conversion. There are exceptions for important additional pages like Terms , Privacy, Shipping, 404 and even blogs… all preferably linked from the website footer.


by Rob Hope @robhope via One Page Love

4 Ways to Collect Email Leads From Your Facebook Group

Wondering how to build an email list from your Facebook group? Looking for tips to help? In this article, you’ll learn four ways to collect emails from your Facebook group. Why Gathering Emails From Facebook Group Members Is Important Facebook groups can be an awesome way to share content, engage with your followers, and build [...]

The post 4 Ways to Collect Email Leads From Your Facebook Group appeared first on Social Media Examiner.


by Nate McCallister via Social Media Examiner

LinkedIn Launches A New Talent Analytics Solution 'Talent Insights'

In a move that highlights how LinkedIn is increasingly eyeing human resources software as part of Microsoft, the company launched Talent Insights, an analytics tool for talent. Talent Insights is a self-serve data graph that utilizes LinkedIn data to enable HR folks to benchmark where talent is...

[ This is a content summary only. Visit our website https://ift.tt/1b4YgHQ for full links, other content, and more! ]

by Web Desk via Digital Information World