教你将自己的网站上线

卡布奇诺有点苦
2,816 阅读3分钟

刚开始学前端时留意到很多前辈都有自己的线上个人网站，那时就在想什么时候也能搭建我自己的线上网站。

这次借着做毕设的机会，实现自己之前的一个心愿 😁。

当然，在此之前你得有自己的域名和服务器，这在万网和某宝上很容易解决。

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

由于我用的是 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 的事情 😊 ，所以赶紧动动手，只需一些简单的步骤就能让自己的网站上线。

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

avatar
文章
阅读
粉丝