从0搭建Vuepress到云服务器

心如止水_自在如风
1,273 阅读4分钟

这是我参与更文挑战的第2天，活动详情查看： 更文挑战

前期准备

准备：阿里云ECS服务器一台(操作系统选centos)，一个域名

购买域名配置ssl且开启解析到自己的服务器

  1. 购买一个域名，我买的是阿里云的学生域名.top的，一块，选一个域名，然后认证一下，备案后，等几天就好了，没备案访问不了。 image-20210407150438752

  2. 买ssl证书并验证。www.bilibili.com/video/BV17t…

  3. 下载对应服务器的证书，我用的nginx就选

    image-20210407125941076

  4. 下载下来，解压出来两个文件，一个后缀是.key，一个是.pem，之后通过ftp之类的软件传到服务器的文件夹，并配置在nginx中。后文nginx会讲。

A记录： 将域名指向一个IPv4地址（例如：100.100.100.100，就是你买的服务器的公网ip），需要增加A记录 需要将A记录添加到域名解析中，记录值写服务器的公网IP。

打开端口

ECS云服务器选CentOS7就行，去控制台的安全组配置规则，打开80端口(HTTP服务)和443端口(HTTPS服务)。端口就像假设服务器是一个展览会，有很多不同的会馆，开放会馆对应的端口别人才能看到开放端口后的会馆的东西。如果不开放端口，别人也就没法看到你会馆里的东西。

安装Vuepress

安装Node.js

参考：www.cnblogs.com/qiushuiwany…

yum install -y nodejs

更新npm

npm install -g npm
安装Vuepress-reco(或者任意你喜欢的主题)

www.oschina.net/p/vuepress-…

下载下来，通过xftp之类的软件把文件传到服务器上。(按理是可以直接装的，但是不知道为啥我只有从windows传上去的才能用...)

用xshell或命令行ssh连接服务器

让服务器使用cd命令到你上传vuepress项目的根目录。

执行npm run docs:build命令，具体的build命令要去package.json中看，可能不同项目有所不同。让项目成一个public文件(也可能是dist，总之就是项目构建产生的静态文件)，后面说如何让nginx指向这个文件夹

配置Nginx

安装Nginx并配置

配置问题：blog.csdn.net/luomao2012/…

编译安装

  1. 安装需要的插件

    yum -y install gcc
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel

  2. 下载Nginx且解压

    安装参考：blog.csdn.net/weixin_4139…

    这个下载是下载到你的当前目录的。我是放在了/usr/local/下

    wget http://nginx.org/download/nginx-1.9.9.tar.gz

    解压到usr/local/server

    tar -zxvf  nginx-1.9.9.tar.gz -C usr/local/server

    编译安装(这个地方要注意安装上ssl模块！！！)

    ./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_gzip_static_module --with-http_ssl_module
make
make install

    配置到环境变量

    vim ~/.bash_profile

    export NGINX_HOME=/usr/local/nginx
export PATH=$PATH:$NGINX_HOME/sbin

    image-20210430142548029

    source ~/.bash_profile

    启动nginx

    nginx

    访问IP（在浏览器的地址栏输入你的ip地址）

    默认访问的是niginx里配置中的对应的html文件下的index.html(就像启动tomcat一开始默认一个页面一样)

    配置nginx.conf （nginx主配置文件）多个网站你也可以通过include配置文件来控制。

    #user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    
   server {
    listen       443 ssl ;
    server_name  anblog.top www.anblog.top;
    
    #ssl证书的pem和key
    ssl on;
    ssl_certificate /usr/local/nginx/conf/blog/blogpem.pem;
    ssl_certificate_key /usr/local/nginx/conf/blog/blogkey.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;
		#你指向的项目生成的静态文件路径
    location / {
       root /var/lib/jenkins/workspace/vuepress/public;
       index index.html;
    }
		#缓存策略
    location ~ ^/(images|javascript|js|css|flash|media|static)/ {
        expires 30d;
    }
}
  
  server {
      listen       80;
      server_name anblog.top www.anblog.top;
      #重定向到https下的域名
      return 301 https://$server_name$request_uri;
  }
}

    配置地址要注意nginx指向的这个文件的访问权限是否够，比如之前我放到根目录的root下就需要改权限，否则nginx访问不到，这里我放的是jenkins服务器下，你选择你存放博客的路径下的public就行，只要nginx能访问到就行

    重启nginx服务

    nginx -t 
nginx -s reload

    访问你的域名就能看到页面啦

    image-20210602200124239

    一些常用的Nginx命令

    nginx #启动nginx
nginx -t #测试是否启动成功
nginx -s reload #重启nginx

    nginx自动配置网站：www.digitalocean.com/community/t…

更新博客

这时候每次你需要更新Vuepress下的博客就是，先build再启动(比较麻烦，我后面的文章会讲如何用jenkins自动化部署)

npm run docs:build
npm run docs:dev

遇到的坑

访问图片访问不到images里的图片(目前没明白为啥= =-)

#访问不到，location中删掉()里的images就好了
    location ~ ^/(javascript|js|css|flash|media|static)/ {
        expires 30d;
    }

npm报错

image-20210407123510692

更新npm就好了。

npm install -g npm

刚装上的是6.1.37，更新到7.8.0就好了

avatar
文章
阅读
粉丝