Deploying From GitHub to Server
Articles,  Blog

Deploying From GitHub to Server

-In this video, we’re going to
be looking at deploying code from a host of repository
like GitHub or Bitbucket and pushing that to a
server like an Amazon EC2 instance or a Digital
Ocean droplet. Now I’m going to be
using GitHub in this case and I’m going to be using
Digital Ocean to create a droplet. And we’re going to
be using to actually deploy this. And this makes it really
easy to actually deploy your application and
keeps it all in one place and keeps it really nice. I’ve used a couple of different
websites that work like dploy. But I found that dploy
has the most options. And it’s also really
easy to set up, as well. So as you can see, I
have a GitHub repo here. It’s called Hello World. And I basically just have one
file in here– one commit– and this just says Hello World. In real life your application
will obviously be a lot larger. But in this case, I’m just
going to use this as an example. And you can see the
result of this here. So by the end of
the video, we’ll have deployed this– all of
the code in this repository– to a Digital Ocean server. So regardless of what
service you’re using, I’m going to go ahead
and set this up now. So I’m going to create a new
droplet in Digital Ocean. If you have not already
signed up with Digital Ocean, go ahead and feel
free if you want to. So I’m going to
not really choose too many different options here. I’m just going to
hit Create Droplet. And that’s going to
create my droplet for me. And I’ll get a user name and
a password just emailed to me. You can add an SSH key here. It really depends on how
you want to work with this. OK, so once your
droplet is created, we’re going open up a terminal
and SSH over to our server. If you’re using
something like Windows, you can use
[? party ?] to do this. Someone’s been connected,
the first thing we want to do is install Apache
just so we can test that this works
via an HTTP server. You cannot obviously set up
your droplet however you want to with the services you
need, et cetera, et cetera. So I’m going to, first
of all, update APT. And now that that’s done,
I’m going to install Apache. So what we’re now
interested in is where our public
files are located. In this case, it happens to
be in [INAUDIBLE] www/html. This will differ depending on
the server that you’re using. And you can see that we’ve got
index.html in here by default. So if we actually go
over to a browser window over I’ll IP address, we should
see the default Ubuntu Apache page. And here’s the default
page that we would see. So as long as you’ve
got this working and you know the directory where
your public files are stored, we can use to copy
the files from our GitHub repository over to
our public directory so we leave this I think
will need this later on. Now what we’re going to
do is, inside of, we’re going to
connect a repository. So you’re going to need to
provide your GitHub, Bitbucket, or self-hosted details here. In this case, I’m going
to choose the Hello World repository. So I’m going to give it a
title here and a color label, if you want, and I’m
going hit connect. So once that’s done, you’ll
see that your repositories been added to the list here. And mind that before you
actually do any of this you will need to connect to
your GitHub or other account. So I’m going to hit
Hello World here. And we have the option to create
an environment and server. So what we need to do is
create an environment here. And I’m just going to call
this Hello World Production. And you can give it a
color label if you want. And we also need to
choose the branch as well. So this could be a development
branch, a specific branch or, in this case, it’s just
going to be the master branch. And there’s not really much
else you need to do here. But you can do things like
HipChat or Campfire deployment notifications. So I’m going to hit
add environment. And once that’s done,
we can choose a server. So you can see the options here. And depending on when
you’re watching this idea, there maybe additional options
when you come to use this. But in this case, I’m
going to hit Digital Ocean and click Next Step. So I’m going to call
this hello world server. The repository path we can
just leave as a forward slash. For the drop pit though,
what we need to do here is we need to
actually change this to the Hello World droplet. So now what we can do is we
can provide the remote path. Remember this remote path
is [INAUDIBLE] www/html. So we can enter that in here. So now we can go and
click check connection. But this is going to fail. So you’ll see what
we need to do here to actually make this work. And this is because we don’t
have the SSH key for added to our authorized
keys on our server. And there’s [INAUDIBLE]
instructions here that will actually tell
you how to do this. So if you hit learn about
public key authentication, you do get a guide here. What we’re going to do is
we’re going to hit this and we’re going to take this
key we’re going to copy this and we’re going to paste
this into our authorized keys on our server. So we’re going to use vim to
hit our home directory in SSH in it’s authorized keys. So we’ll hit Insert mode. We’ll paste this in. We’ll come out. And we’ll save that and quit. So now when we go and hit
Check Connection– there we go. It works. So there’s a couple
of optional things you can do here like
post deployment commands and webhooks. I’m going to skip this for now. So we’re now ready to deploy. So on our server
here, what’s now going to happen is when we
deploy from our GitHub repo, this is then going
to be copied over to our public HTTP directory. So let’s click Deploy. We have the option
to choose a revision. And we can enter some
deployment notes here. I’m not going to do this. I’m going to hit Review. And then I’m going to
hit Start Deployment. So that’s now deploying. If we just refresh
the page, there’s not a lot of files here. So that should be done now. And when we go
over to our server, you can see that
that’s been deployed.


Leave a Reply

Your email address will not be published. Required fields are marked *