Part I of Building a Web Server Awesomely: Set up your Pi, router, & development machine

Monday, September 25, 2017

Part I of Building a Web Server Awesomely: Set up your Pi, router, & development machine


This is the first part in a series of how to turn a Raspberry Pi into a fully-functional Web server, serving multiple custom domains. Want more context? Read the introductory post.

Let us begin. Here's what you'll need:

  • A raspberry pi.
  • A router. Bet you already have one of these, since you're on this site.
  • A development machine.

I know it said that all in the title, but I have no sense of what people do or do not read.

Pi time!

You're going to want a Pi, an SD card, a heat sink, and probably a case because that's cool. You can get all of these things in a starter kit. Mine's in a clear case so I can watch it merrily blink away.

Get it all set up per the instructions, all the way through logging in and starting up the GUI, and then come back to me.

Hello! Good job booting up your Pi! A couple important things to note:

  • You should add your own account to the Pi that you'll use for most of your development. If not, you must change the default password of the default account (pi/raspberry). Now the most important part in either case: You must set your locale properly before you choose a password for your account. Either just trust me, or read this to understand better.
  • I bet you think it's all fun and games to have your Pi all wireless. No. Plug it into your router with a wired ethernet connection. This will save you an hour later when you're wondering why it's so slow to ssh into your Pi. Plus, we're not clowns. We want the response time for our server to be baller.

Let's get into that router config

There will come a moment in Part II when you've got your Web server set up and think you're a god because you can reach it from the computer it's running on – perhaps even from another computer on your LAN. You are not this thing, not unless you configure your router. Your computer is on a LAN, my friend, and the outside world can't access a random port on a random machine on your LAN. Your Pi doesn't even have its own external IP address. Internal, sure. And we'll get to know it quite well. But only your router has an external IP address. Therefore, logically, your router is going to have to be the gatekeeper when people are trying to get at your Web server.

So we're going to do two things:

  1. Give your Pi a static internal IP address.
  2. Forward traffic to port 80 on your router to your Pi.

Static internal IP

This is my service to you: I give you tips that, while not strictly necessary, will save you much heartache. Sometimes you'll need to reboot your Pi, and when you do, your router may not necessarily assign it the same internal IP address. And yet so much of your life has come to care about this IP address: Your SSH client, for example, and your router, when it comes to forwarding traffic.

So first, go to 192.168.1.1 in your browser. This address is your router's IP. Your other machines will have similar addresses, differing by the integers after the last dot. Log in to your router. (If you don't know the default username and password, Google your router brand or check here. Most are admin/admin or admin/password.)

Next, probably somewhere in advanced settings, you'll see something about DHCP or LAN setup. Mine, for Netgear, was under Advanced > LAN setup > Address reservation. Choose a low-ish integer to assign your Pi; don't choose 1, because if you were reading carefully, that is reserved for your router; don't choose a number in use by another machine, because that will be confusing for you for 5 minutes. More in-depth reading here.

Forwarding port 80

This is so when a machine on the internet knocks on your router's door at the default HTTP port, 80, it knows to send that traffic to your Pi's port 80, where your Web server will be eagerly listening.

In my router, this configuration is hidden under Advanced > Advanced settings > Port forwarding, because it is double advanced. Add an HTTP service that forwards from external port 80 to port 80 at the static, internal IP address you just assigned your Pi in the step above.

Your development setup

You'll probably want another computer on which you can install an IDE and ssh into the Pi. It's not strictly necessary if you have a lightweight IDE for your Pi (read: emacs, vim) and a screen to connect it to, but personally I prefer to ssh.

The particulars are a matter of personal preference, but you'll want an IDE, an SSH client, and an SFTP client. I'm using:

Atom is neat because it's a highly configurable IDE with a lot of community support, so it's got tons of plugins; I installed some to support Javascript, node, Github, etc. But mostly prettification. Who can read CSS that's not indented properly?

My development flow is to edit local files with Atom and regularly upload them to the Pi using Bitvise. I use Bitvise's shell to do my SSHing, so starting up servers, editing my crontab, aggressively refreshing configurations – all the good stuff.


That, my friends, is the end of the "setting up basic stuff" post. Next up is actually setting up our first Web server on the Pi. If you're ready for more, proceed to Part II.

20 comments :

  1. I am confident this article with the above 10 tips will help you qualify the best company to deal with for your new web project.skrajučių dizainas

    ReplyDelete
  2. In the long run in around about two months (shifts), individuals will definitely know a ton about website specialist preparing and this will enable them to begin planning sites and putting their abilities under a magnifying glass. In time, they will likewise hone their ability much more by contemplating through a conventional or online web improvement course to turn out to be genuine experts in the business who'll get paid a huge number of dollars by huge organizations to do what they cherish most. It doesn't beat that!
    Web Design Curriculum

    ReplyDelete
  3. This is highly informatics, crisp and clear. I think that everything has been described in systematic manner so that reader could get maximum information and learn many things. peter web designer

    ReplyDelete
  4. This is my first time i visit here. I found so many entertaining stuff in your blog, especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the leisure here! Keep up the good work. I have been meaning to write something like this on my website and you have given me an idea. עלויות בנייה פרטית

    ReplyDelete
  5. They excel at project management, provide accurate estimates, and deliver timely results.
    top ux designer

    ReplyDelete
  6. I am confident you've got a great enthusiast following there.
    link opener generator

    ReplyDelete
  7. They’re knowledgeable and they suggest useful iterations for their projects.
    best web design companies

    ReplyDelete
  8. looks like a cool tutorial for IT technicians in his company. Visit: m.dragonrest.net

    ReplyDelete
  9. As convenient and affordable shared hosting can be, it has its limits and people need to know what those limits are. https://onohosting.com/

    ReplyDelete
  10. Anti static pp conductive corrugated sheet / Box layout. ESD Corrugated box /Anti satic polypropylene boxes. Visit our website esd box to learn more.

    ReplyDelete
  11. Professional Website Design Service Pack

    SEO service providers offer e-commerce solutions for your business products and services. They design websites that are easy to use, attractive and memorable by providing appropriate and attractive design elements; specialized keyword choices; Meta-tag and Alt tag optimization; strategic linking; structure optimization and content optimization. In addition to these, SEO web design service Web Design Toronto

    ReplyDelete
  12. Hey enormous stuff or pleasant information you are offering here.
    top creative agencies San Francisco

    ReplyDelete
  13. I think this is a charming issue, I expect you would surely post on it again sometime near the future. Thanks guys!
    best design agencies

    ReplyDelete
  14. This is an excellent post. At times, it may be difficult to distinguish between the good and the bad. Would you like to see more information updated? Check out our Click Speed Test Challenges article. The CPS Test is a free click per the second test that determines your mouse clicking speed over a predetermined time period.

    ReplyDelete
  15. Well, I have got the best information from here the site is fully stuffed with the knowledgeable information. user interface design company

    ReplyDelete
  16. this relies straightforwardly upon your general spending plan. This kind of hosting arrangement is known as VPShttps://onohosting.com/

    ReplyDelete
  17. Education and training courses are important but it seems that experience and a portfolio of your work is key to getting noticed.https://totoweki.com/

    ReplyDelete
  18. Will one individual handle all SEO tasks or not? You may choose an all-in-one SEO bundle if you have one SEO specialist handling the optimization effort. SEO philadelphia

    ReplyDelete
  19. Integrated Risk Management is an essential component of any successful business operation. By taking a holistic approach to risk management, organizations can identify and assess risks more effectively, improve decision-making, increase stakeholder confidence and trust, enhance operational efficiency, and meet regulatory and compliance requirements. With the benefits of IRM becoming increasingly apparent, it is essential that organizations implement effective IRM programs to ensure their long-term success.

    ReplyDelete