2021年9月学习记录和踩坑记录【手把手教你seo优化一周后你将收获seo搜索引擎排名前10】

本文链接：https://blog.csdn.net/qq_19313497/article/details/120910171

前言

傻逼总是喜欢折腾的，偶尔折腾一下这个折腾一下那个，最后什么也不精通，但什么都懂一点儿。最近呢，又喜欢上去打造个人品牌了。于是就用nextjs搭建了一个个人博客，从购买服务器到购买域名再到编写代码配置nginx做seo优化，这一套过程完全打通。上个月的时候我在百度搜索引擎检索挽枫blog的时候，完全检索不到我的博客，但是现在去检索的话，就一定能在搜索引擎返回的前十条记录里找到我的博客。读完这篇博客，你将收获如下能力：

了解如何购买阿里云服务器并配置安全策略
了解如何购买域名、备案以及绑定服务器
了解react服务端渲染框架Nextjs
了解nginx端口转发、ssl证书申请、https配置等
了解必备的linux命令
了解服务端渲染部署流程，比如如何使用pm2部署项目
最重要的是了解如何做网站的SEO优化

谁适合阅读这篇博客：

如果你想了解前端项目从开发到上线这样的流程
如果你是前端初级工程师
如果你想做好一个网站的SEO优化
注意：本篇博客讲解的重点是SEO优化、nginx和服务端渲染Nextjs如何部署。
好了废话不多说，我们开始吧！

购买阿里云服务器并配置安全策略

购买ECS服务器

如果你是学生的话，你可以前往阿里云搜索云翼计划可以享受学生优惠的服务器。
这里我省略掉购买阿里云服务器的过程，大家如果只是单纯的测试学习可以买个便宜的ECS服务器就行了。
这里我贴上购买产品的地址

设置安全策略

为什么要设置安全策略？因为阿里云服务器考虑到用户使用服务器的安全性，没有默认被打开的端口是无法被访问的，所以你需要打开你当前服务占用的端口。我比较懒，所以直接1～65535都打开都允许所有源访问。【注意！！！重要的事儿说三遍！！！不要学我，这里建议针对自己的服务占用端口打开对应的端口，你可以学我选红的下面那一行类似的配置】
在这里插入图片描述

域名购买、备案和绑定服务器

域名购买

域名购买的方式方法和途径很多，自己度娘哈。哈哈！！～！！
笔者买的是阿里云的域名。如果为了只是玩儿一下，可以随便买个便宜的域名。

在这里插入图片描述

域名备案

阿里云域名备案流程

域名绑定IP

在这里插入图片描述

服务端渲染框架Nextjs

为了简洁掩饰需要大家直接用Nextjs提供的脚手架简洁的创建一个demo算了,Nextjs快速入门

部署Nextjs项目

什么是服务端渲染SSR

说实在的，Nextjs官网提供了部署Nextjs的方式，说实话，我没看明白，不知道读者的你看明白了没有。于是我就自己去google了一下也问了一下我上家公司的技术总监。以下A是我，B是技术总监回答的，希望可以用这种代入感的方式让大家学到更多。

A:什么是服务端渲染和客户端渲染？
B:首先客户端渲染和服务端渲染的本质区别在于js渲染html这个过程在哪个端进行的，在服务端进行的就是服务端渲染SSR，否则就是客户端渲染CSR。
A:为什么会有SSR这样的概念？
B:像React、Vue、Angular这样的框架出现，导致本来js操作的dom只是辅助性质，现在变成了全靠js实时输出html，这样做的弊端就是不利于搜索引擎的SEO、导致首屏加载速度很慢。现在问题来了，像公司官网这些要脸面的网站，你总不能让搜索引擎检索半天都查不到吧？你也总不能官网打开的时候卡个几分钟吧？
A:请问Nginx在服务端渲染部署过程中能起到什么样的作用？
B:首先有一点要说明，你用不用nginx和你是不是SSR项目没有因果关系。nginx在服务端渲染部署过程中的作用很多，比如做反向代理、负载均衡、高可用。反向代理最基础的功能就是能够让你的服务器之暴露一个端口根据请求不同代理到不同的端口的服务上。也可以代理到其他服务器上，这样就可以做负载均衡了，搭配keepalived就可以做服务的高可用了。
C:emmm讲这么多老子一句话没看懂.........
A:没关系的啦老兄，你往下面看......

如何部署Nextjs项目

pm2的使用

根据A大神的讲解，于是乎我就去百度检索如何部署Nextjs项目，检索到的结果有些emm…让我去打包然后用nginx代理访问，有的直接让我在服务端npm run dev…emmm好家伙，于是我就去google一下，发现，有人讲解了一种采用pm2去部署nextjs项目的方案，于是我就采用了。

// 默认你已经安装配置好了node和npm
npm install pm2@latest -g
// 在你项目的根目录里执行如下命令
pm2 start npm --name "my-blog" -- run build
// 查看当前启动的pm2服务
┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┬──────────┐
│ id │ name               │ mode     │ ↺    │ status    │ cpu      │ memory   │
├────┼────────────────────┼──────────┼──────┼───────────┼──────────┼──────────┤
│ 0  │ my-blog            │ fork     │ 1    │ online    │ 0%       │ 54.4mb   │
└────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘
// 如果你想停止这个服务
pm2 delete 0

上面的那种部署方式我没有改变项目的启动端口，如果你没有改动默认就是3000端口。

nginx配置https

当你购买了域名之后，你就可以免费申请一个ssl证书了，这个证书的目的就是验证这个域名是你这台服务器所有者的。
第一步进入ssl证书界面，创建证书:
在这里插入图片描述
第二步创建完证书之后你就可以下载证书了，注意这里我才用的是nginx服务器，如果你用的是其他的服务器，请选择对应的证书进行下载。

nginx配置https的前置条件是你拿到了ssl证书，当你购买了域名后，你可以免费获取多个ssl证书。拿到之后将它上传到自己的服务器的某个路径下，这个路径一定要记住哦。

#把如下配置放到http括号里即可
server{
  listen 80;
  server_name 你自己的域名;
  return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    #配置HTTPS的默认访问端口为443。
    #如果未在此处配置HTTPS的默认访问端口，可能会造成Nginx无法启动。
    #如果您使用Nginx 1.15.0及以上版本，请使用listen 443 ssl代替listen 443和ssl on。
    server_name 你自己的域名; #需要将yourdomain.com替换成证书绑定的域名。
  #  root html;
   # index index.html index.htm;
    ssl_certificate 你自己的;  #需要将cert-file-name.pem替换成已上传的证书文件的名称。
    ssl_certificate_key 你自己的; #需要将cert-file-name.key替换成已上传的证书密钥文件的名称。
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    #表示使用的加密套件的类型。
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #表示使用的TLS协议的类型。
    ssl_prefer_server_ciphers on;
    location / {
     proxy_set_header Host $host;
            proxy_set_header X-Real-Ip $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_pass http://公网IP;
    }
}