教你将本身的网站上线

刚开始学前端时留意到不少前辈都有本身的线上我的网站，那时就在想何时也能搭建我本身的线上网站。

此次借着作毕设的机会，实现本身以前的一个心愿 😁。

固然，在此以前你得有本身的域名和服务器，这在万网和某宝上很容易解决。

首先链接并配置远程服务器

因为我用的是 mac，远程链接 Linux ( CentOS ) 比较方便，因此云服务器选择的是 CentOS 系统。

在 mac 下只需直接打开终端 ( Terminal )，输入 ssh username@ip 就能够链接 CentOS ，这里将 username 和 ip 换成你本身服务器的用户名和 ip 地址便可。

链接成功后，安装如下依赖:

• Nginx 是用 C 写的，须要 gcc 编译;

yum install gcc
复制代码

• Nginx 的 Rewrite 和 HTTP 模块会用到 PCRE；

yum install -y pcre pcre-devel
复制代码

• Nginx 中的 Gzip 要用到 zlib；

yum install -y zlib zlib-devel
复制代码

• 安装 OpenSSL 用来安全通讯；

yum install -y openssl openssl-devel
复制代码

其中 -devel 是 develop 开发包的意思。

• 安装 Nginx

下载源码包：

wget http://nginx.org/download/nginx-1.12.2.tar.gz
复制代码

解压源码包：

tar -zxvf nginx-1.12.2.tar.gz
复制代码

执行

./configure --prefix=/usr/local/nginx --with-openssl=/usr/local/openssl
make && make install
复制代码

启动 Nginx：

/usr/local/nginx/sbin/nginx
复制代码

这时在浏览器地址栏输入你的服务器 IP 地址应该能看到 Nginx 的欢迎页面。

• 安装 Github

yum install git   //首先安装 github

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
// your_email@example.com  就是你本身的 github 邮箱；

// 而后会让你连续两次输入自定义密码，用来后面获取 ssh key；

ssh-add ~/.ssh/id_rsa

cat ~/.ssh/id_rsa.pub
// 如今你会拿到一段 ssh-rsa 开头 your_email@example.com 结尾的 key ，而后复制这段 key 去 github 里添加 SSH key。
复制代码

添加成功后运行： ssh -T git@github.com 检测是否链接上，并询问你是否继续链接，输入 yes 后回车便可看到一段链接成功的提示。

如今，你就能够用 git clone 和 npm run build 命令来拉取和打包项目了。

解析和绑定域名，这个在你购买域名的页面有很详细的教程，因此就很少说了。

当你的域名就和 ip 地址绑定上后，在浏览器地址栏输入本身的域名也会发现 Nginx 的欢迎页面 👏。

Nginx 域名配置

进入本身的云服务器输入 vi /etc/nginx/conf.d/default.conf 打开 Nginx 的默认配置文件

• 在 server_name 里写上本身的域名，
• 在 root 后面写上打包后的文件目录，即 dist 文件夹所在目录，
• 在 location 里配置访问路径 / 和 index 页面，这里的 try_files $uri $uri/ /index.html; 是指 url 重写。

写好、保存后退出，输入 service nginx restart 重启 Nginx。

可能输入域名后会显示 403 报错，这是权限配置不正确致使；

输入 vi /etc/nginx/nginx.conf 指令进入 Nginx 配置文件

• 将 user nginx 修改为 user root 赋予 Nginx root 权限，以后重启 Nginx

若是仍旧 403 报错，能够试试这个方法：

• 将代码文件移至 root 之外的其它目录 ( 固然也要在 Nginx 的配置文件里修改对应的 root 地址 )；
• 执行 chcon -R -t httpd_sys_content_t /srv/www/yoursite ( 这里换成你的代码文件目录 ) 修改安全上下文。

这样应该就能够解决 403 问题了。

如今在浏览器地址栏里输入你的域名，是否是发现本身网站的首页出如今眼前 🤗。

做为一名前端开发者，能拥有本身的线上网站是件很 cool 的事情 😊 ，因此赶忙动动手，只需一些简单的步骤就能让本身的网站上线。

若是你喜欢这篇文章的话，不妨点个喜欢 ❤️ 或 关注 👀， 这将是我更大的动力 😃。