搭建一个咱们自己的网站-把前端代码部署到服务器

273 阅读2分钟

先说说这个事,到底是个什么事

搭建网站,就是把代码部署到服务器上

前端代码部署到服务器,说白了就是把前端的文件上传到服务器上就行了,刷新浏览器就行了

前端文件是什么呢?

1、可以是最原生的html、css、img等等

2、也可以是使用vue、react等等框架打包后的dist目录文件,其实dist目录文件就是最原生的html、css、img等等 哈哈哈

然后就是服务器了

服务器是什么呢?

其实就是一个系统而已,但一般都使用linux的,在此基础上的有ubuntu、centOS

当让也有用widnows,但不建议 为啥呢?你猜 哈哈哈哈哈哈

网站是什么呢?

其实就是一个域名,例如:www.baidu.com

网站怎么展示服务器上的内容的呢?

需要把域名的@、www解析到咱们的服务器上

服务器怎么和域名关联起来呢

答案就是:nginx

好了,这亮点确定了,剩下的就是实操了

1、前端代码:咱们自己有代码

2、服务器

要么自己搭建、要么买现成的 腾讯云、阿里云 等等

这里以腾讯云为例

1、购买腾讯云服务器

buy.cloud.tencent.com/price/cvm/o…

2、登录服务器:其实主要是为了拿到用户名与密码

www.tencentcloud.com/zh/document…

3、自己电脑登录到服务器

其实就一行代码:

ssh 服务器用户@服务器IP地址
​
例如: ssh root@120.110.119.55

www.itqaq.com/index/442.h…

4、上传前端代码

其实也是一行代码

scp -r 前端代码目录 root@120.110.119.55:服务端的存放的目录
​
例如:scp -r /Users/demo/Documents/demo root@120.110.119.55:www

至此,咱们代码已经部署到服务器了,剩下的就是把网站与服务器关联起来了

www.freecodecamp.org/chinese/new…

3、网站、域名、nginx

域名

这个咱们可自己造不了,只能买了,还是腾讯云、阿里云等等

购买:cloud.tencent.com/act/pro/dom…

域名买完了,需要解析到咱们的服务器上

解析:cloud.tencent.com/document/pr…

nginx安装与配置

安装:cloud.tencent.com/developer/a…

配置:新建一个网站自己的配置文件

在哪里创建配置文件?

nginx -t

blog.csdn.net/fdipzone/ar…

找到nginx.conf,查看里面的include

怎么找到nginx.conf

blog.csdn.net/willingtolo…

include的用法

blog.csdn.net/qq_30665009…

include 是干什么的

juejin.cn/post/723111…

server {
    listen       80;
    # *****  你的域名
    server_name  demo.com;   
​
    # 路由
    # *****  你服务前端代码的存放目录
    location / {
        root   /www;    
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

问题

1、部署后 网站访问 500

blog.csdn.net/weixin_4400…

2、favicon.ico不显示:只要路径对了,就是chrome缓存了

blog.51cto.com/u_13502462/…

3、favicon.ico 怎么制作?

www.logosc.cn/favicon-gen…

4、nginx安哪里了?配置文件在哪?

www.cnblogs.com/ryanzheng/p…