资讯专栏INFORMATION COLUMN

写给前端小白看的linux部署基础知识

huangjinnan / 1210人阅读

摘要:前端平时接触到的机会并不多,但是懂点对于前端来说还是有益无害的,起码还是要了解一下最基本的部署知识。特别注意的是,国内注册的域名要实名备案,否则无法域名解析。

前端平时接触到linux的机会并不多,但是懂点linux对于前端来说还是有益无害的,起码还是要了解一下最基本的部署知识。

博客地址

购买服务器

要部署项目,首先我们需要一台服务器。平时开发,项目是跑在我们本地电脑上的,现在我们想要让所有人都能访问这个项目,就需要部署到一台能被外网访问的服务器。现在市面上有虚拟主机,VPS,ECS(云服务器)。虚拟主机我就不考虑了,因为虚拟主机基本不支持ssh登录,而我们希望学习linux知识,所以只考虑VPS和ECS。而ECS价格比较高,考虑到我只是为了学习用,对于服务器的性能和配置要求不高,最后决定购买VPS。

VPS的购买渠道有很多,比如搬瓦工,vultr,我这里购买的是vultr的VPS($5/mo的套餐),安装的操作系统是Ubuntu 14.04 x64

安装成功过,在vultr控制台可以看到如下信息:

SSH远程登录

我们想在本地电脑登入到服务器,这就需要一个支持SSH登录的终端工具。windows上比如Xshell,cmder,Mac上比如iterm2。

打开终端,输入

ssh -p 你的端口号 你的用户名@登录地址
# 比如登录入到vultr的vps(默认端口是22,所以可以不指定)
 ssh root@172.11.11.111

输入完密码后,即可进入服务器

修改密码
passwd

vultr默认密码太复杂,所以自定义密码方便记忆。

apt-get

apt-get命令可以很方便的下载我们需要的包

apt-get update
apt-get install openssl libssl-dev nginx wget git

Nginx安装完成后,在浏览器访问你服务器的IP地址(例如:http://149.28.17.111/ ), 应该可以看到Nginx的欢迎界面!

Nginx静态资源

我现在希望访问http://149.28.17.111/test 可以展示一个静态页面,这时就该Nginx上场了!

mkdir -p static/test

在当前目录下,新建一个static文件夹,static里面又新建了一个test目录,在里面存放一个静态文件index.html

vi static/test/index.html

按下i进入insert模式,输入如下代码:




    
    无路赛


    

无路赛

按下ESC退出insert模式,输入(注意有冒号!)

:wq!

保存退出

vi /etc/nginx/conf.d/mytest.conf

新建一个nginx配置文件,输入如下代码

server {
    listen 80;
    server_name 149.28.17.111(填写你的ip地址);

    location /test {
        root   /root/static;
        index  index.html;
    }
}

修改nginx用户组(不然会报403)

vi /etc/nginx/nginx.conf

www-data修改为root

user root;

于是访问http://149.28.17.111/test Nginx就会去找/root/static/test目录下的index.html

ftp上传文件

前面我们使用vi编辑器新建了两个文件(mytest.conf index.html),你可能觉得写起代码来一点都不方便。其实我们也可以在本地写好这两个文件,然后使用ftp工具将这两个文件上传到服务器。

ftp工具有很多,比如flashfxp。以xshell自带的xftp为例,打开ftp,连接到服务器

ftp界面,左边是我们本地目录,右边是服务器目录

右边可视化界面,能很方便的查看服务器的各个文件夹,同时也可以把本地的文件上传到服务器(只需把文件拖拽到右边窗口即可)

node版本控制

前端开发经常要使用npm安装各种包,因此需要搭建node环境
使用nvm进行版本控制

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

安装完成后,新打开一个终端登入服务器

nvm install 8.11.1

安装完成后,输入

node -v

如果出现版本,说明node安装成功!

pm2

新建app.js

vi app.js
const http = require("http");                                
                                                             
http.createServer((function(req, res) {                      
        res.writeHead(200, {"Content-Type": "text/plain"});   
        res.end("八嘎Hentai无路赛");                              
})).listen(8081);                                            
                                                             
console.log("server start at 8081");                         

保存退出

启动app.js

node app.js

在浏览器访问 http://149.28.17.11:8081 就可以看见页面

使用命令node app.js启动项目有个致命的问题,如果把当前终端关了,项目也就默认关闭了。

因此我们需要使用pm2管理项目

npm install pm2 -g
pm2 start app.js

使用pm2启动项目后,即使当前终端关闭了,node进程仍然在后台运行着!

Nginx代理端口

我们希望访问项目时,不需要带上8081端口。可以使用Nginx的反向代理功能:

vi /etc/nginx/conf.d/mytest.conf

修改配置

upstream mytest {
    server 127.0.0.1:8081;
}
server {
    listen 80;
    server_name 149.28.17.111(填写你的ip地址);
    
    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-Nginx-Proxy true;

        proxy_pass http://mytest;
        proxy_redirect off;
    }

    location /test {
        root   /root/static;
        index  index.html;
    }
}

保存退出,重启nginx

nginx -s reload

原理就是:访问http://149.28.17.111时, nginx反向代理到http://149.28.17.111:8081, 并把本地node服务器返回的内容展示出来

域名解析

目前我们访问网站需要直接输入ip地址,这样十分不方便。为此,我们需要买一个域名来解析到网站。

域名提供商有很多,比如万网,godaddy等等。特别注意的是,国内注册的域名要实名备案,否则无法域名解析。

以万网举例:添加两个解析,其中记录值填的就是vps的ip地址

修改ngnix配置

vi /etc/nginx/conf.d/mytest.conf
upstream mytest {
    server 127.0.0.1:8081;
}
server {
    listen 80;
    server_name 149.28.17.111(填写你的ip地址);
    
    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-Nginx-Proxy true;

        proxy_pass http://mytest;
        proxy_redirect off;
    }

    location /test {
        root   /root/static;
        index  index.html;
    }
}

server {
    listen 80;
    server_name www.urusai.site(填写你的域名);
    location / {
        proxy_pass http://mytest;
        proxy_redirect off;
    }
}

server {
    listen 80;
    server_name urusai.site(填写你的域名);
    location / {
        proxy_pass http://mytest;
        proxy_redirect off;
    }
}

重启nginx

nginx -s reload

访问 http://www.urusai.site 或者 http://urusai.site 就可以看到页面了!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/10665.html

相关文章

  • 写给前端小白看的linux部署基础知识

    摘要:前端平时接触到的机会并不多,但是懂点对于前端来说还是有益无害的,起码还是要了解一下最基本的部署知识。特别注意的是,国内注册的域名要实名备案,否则无法域名解析。 前端平时接触到linux的机会并不多,但是懂点linux对于前端来说还是有益无害的,起码还是要了解一下最基本的部署知识。 博客地址 购买服务器 要部署项目,首先我们需要一台服务器。平时开发,项目是跑在我们本地电脑上的,现在我们想...

    王岩威 评论0 收藏0
  • 写给小白看的JS异步

    摘要:主线程在启动程序时被创建,用于执行函数。用户自主创建的若干进程相对于主线程而言就是子线程。子线程和主线程都是独立的运行单元,各自的执行互不影响,因此能够并发执行。这就是的异步机制了。 某天突然写了个方法要从后台调用数据,显示在前台页面,但是输出结果总是空undefined,得不到数据。多方找资料才发现,原来是入了JS异步的坑。 我们常常听到单线程、多线程、同步、异步这些概念,那么这些东...

    gghyoo 评论0 收藏0
  • 26自学转行前端写给和1年前一样迷茫的我的你)

    摘要:转行前端有哪些疑虑在人生的抉择处,寻求一些别人的经验和总结,无可厚非,但是决定了就一定要坚定的走下去,谨慎是为了更好的坚持,而不是放弃的理由。写在前面这里前后端指的是开发的前后端。 转行前端有哪些疑虑? 在人生的抉择处,寻求一些别人的经验和总结,无可厚非,但是决定了就一定要坚定的走下去,谨慎是为了更好的坚持,而不是放弃的理由。写在前面:这里前后端指的是web开发的前后端。1、前端岗位需...

    番茄西红柿 评论0 收藏2637
  • 26自学转行前端写给和1年前一样迷茫的我的你)

    摘要:转行前端有哪些疑虑在人生的抉择处,寻求一些别人的经验和总结,无可厚非,但是决定了就一定要坚定的走下去,谨慎是为了更好的坚持,而不是放弃的理由。写在前面这里前后端指的是开发的前后端。 转行前端有哪些疑虑? 在人生的抉择处,寻求一些别人的经验和总结,无可厚非,但是决定了就一定要坚定的走下去,谨慎是为了更好的坚持,而不是放弃的理由。写在前面:这里前后端指的是web开发的前后端。1、前端岗位需...

    番茄西红柿 评论0 收藏2577
  • 26自学转行前端写给和1年前一样迷茫的我的你)

    摘要:转行前端有哪些疑虑在人生的抉择处,寻求一些别人的经验和总结,无可厚非,但是决定了就一定要坚定的走下去,谨慎是为了更好的坚持,而不是放弃的理由。写在前面这里前后端指的是开发的前后端。 转行前端有哪些疑虑? 在人生的抉择处,寻求一些别人的经验和总结,无可厚非,但是决定了就一定要坚定的走下去,谨慎是为了更好的坚持,而不是放弃的理由。写在前面:这里前后端指的是web开发的前后端。1、前端岗位需...

    番茄西红柿 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<