Ubuntu 下搭建 Nginx 部署 vue 项目

上一篇：Ubuntu 下部署 SpringBoot

第一步： Ubuntu 上安装 nodejs

• 执行 apt install nodejs 命令安装 nodejs。

  • 过程之前的文章已经有很多例子了，不再多说，期间会有一次确认占用磁盘空间的提示，输入 Y 继续即可。

• ▲ 执行 apt install nodejs-legacy 命令安装依赖包，这个包下拥有 node 命令

  • 这个命令之所以标记出来，是因为在以前的版本，这个包是必须安装的
  • 但是，由于这次安装，node 选择了最新版本，执行这个命令时，出现如下提示：

        root@iZwz92d94t8mb03s9z327hZ:~# apt install nodejs-legacy
        Reading package lists... Done
        Building dependency tree
        Reading state information... Done
        Package nodejs-legacy is not available, but is referred to by another package.
        This may mean that the package is missing, has been obsoleted, or
        is only available from another source
        However the following packages replace it:
        nodejs libnode64
    
        E: Package 'nodejs-legacy' has no installation candidate
    

    关键信息：包丢失了、被另一个包引用、以下包替换了它
  • 也就是说，nodejs 的 libnode64 包替换了这个包
  • 如果不放心，那么再执行一下 apt install libnode64 命令

        root@iZwz92d94t8mb03s9z327hZ:~# apt install libnode64
        Reading package lists... Done
        Building dependency tree
        Reading state information... Done
        libnode64 is already the newest version (10.19.0~dfsg-3ubuntu1).
        libnode64 set to manually installed.
        0 upgraded, 0 newly installed, 0 to remove and 7 not upgraded.
    

    关键信息：已经是最新版本。

• 尝试 node 命令

  root@iZwz92d94t8mb03s9z327hZ:~# node
  >
  

  进入了 node 命令窗，可以使用。

• 继续，执行 apt install npm 命令。npm 就是 node 的一个包管理器。

  root@iZwz92d94t8mb03s9z327hZ:~# apt install npm
  Reading package lists... Done
  Building dependency tree
  Reading state information... Done
  The following additional packages will be installed:
  ...
  

• 执行 npm config list 查看 npm 配置（确认是否安装成功）

  root@iZwz92d94t8mb03s9z327hZ:~# npm config list
  ; cli configs
  metrics-registry = "https://registry.npmjs.org/"
  scope = ""
  user-agent = "npm/6.14.4 node/v10.19.0 linux x64"
  
  ; builtin config undefined
  globalconfig = "/etc/npmrc"
  globalignorefile = "/etc/npmignore"
  prefix = "/usr/local"
  
  ; node bin location = /usr/bin/node
  ; cwd = /root
  ; HOME = /root
  ; "npm config ls -l" to show all defaults.
  

第二步： Ubuntu 上安装 Nginx

• 执行 apt install nginx 安装 Nginx

  • 看到有人不知道为什么装 nginx，在这里简单说明一下，nginx 在这里扮演的角色和 apache、tomcat 是类似的，就是一个容器，至于具体的原理有什么异同？反向代理是什么？有什么优势？自行百度吧，我也还在了解中…

• 访问远程服务器的 80 端口（查看是否安装成功）【nginx 的默认端口是 80】

  我自己的远程服务器地址就暂时打码了（后面的文章可能会公开），因为新服务器从0开始配置，很多都是默认信息，怕你们偷偷改我数据。

  

  这个界面就是 Nignx 的默认首页

第三步： 本机（前端代码所在的机器）打包，上传打包文件到 Ubuntu 服务器

• vue 项目的创建单独有教程，也不是本文的重点。这里，就直接以著名的 vue 管理框架 vue-element-admin 为例。 点击跳转GitHub。

• clone 到本地机器（本地机器记得安装 node、npm，并配置环境）

• 打开根目录下 package.json 文件，大概第 6 行的位置，会看到一个 scripts 属性

  ...
  "scripts": {
      "dev": "vue-cli-service serve",
      "lint": "eslint --ext .js,.vue src",
      "build:prod": "vue-cli-service build",
      "build:stage": "vue-cli-service build --mode staging",
      "preview": "node build/index.js --preview",
      "new": "plop",
      "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
      "test:unit": "jest --clearCache && vue-cli-service test:unit",
      "test:ci": "npm run lint && npm run test:unit"
  },
  ...
  

  这里面，包含了一些自定义脚本，冒号左边是脚本名称，右边是实际会执行的脚本。

• 现在需要打包到服务器，所以，应该执行 npm run build:prod 命令（npm run 后面跟脚本名称，不同项目脚本名称配置不同，看清楚了再运行）

  PS D:\xxxxx\vue-element-admin-master> npm run build:prod                              
  
  > vue-element-admin@4.4.0 build:prod D:\xxxxx\vue-element-admin-master
  > vue-cli-service build
  
  
  /  Building for production...
  

  耐心等待 …

  DONE  Build complete. The dist directory is ready to be deployed.
  INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
  

  出现 DONE Build complete 就成功了，这是，项目目录下会生成一个 dist 文件

  ---

  ★ 实际情况中，如果之前没有开发过 vue 项目，可能并不会这么顺利，一个新的 vue 项目下载下来，安装完 node 之后，可能还会遇到各种各样的 “找不到包”、“网络连接超时” 等等的报错。这些类似的报错网上通常都会有很多解决方案，这里不详细说，
  提醒一下：
  1. “网络连接失败” 之类的错误，一般是因为国外的镜像源被拦截或者网速太慢导致，可以切换国内镜像源；
  2. “包安装失败”或者“找不到”之类的错误，因为某些包依赖于其他环境，比如 sass 依赖 python 之类的（这个记不太清，不确定，但确实有这种可能），所以复制基本的报错信息，然后去网上搜一下就有对应解决方案了。

• 在 Ubuntu 上新建一个目录，上传 dist 目录下的文件

  • 新建文件 mkdir 文件名 命令

  • 上传完成后

    root@iZwz92d94t8mb03s9z327hZ:/opt/web/demo# ll
    total 92
    drwxr-xr-x 3 root root  4096 Jul 17 15:48 ./
    drwxr-xr-x 3 root root  4096 Jul 17 15:47 ../
    -rw-r--r-- 1 root root 67646 Jul 17 15:48 favicon.ico
    -rw-r--r-- 1 root root  9127 Jul 17 15:48 index.html
    drwxr-xr-x 6 root root  4096 Jul 17 15:48 static/
    

第四步： Ubuntu 上修改 Nginx 配置文件，指向 web 项目

• 执行 cd /etc/nginx/sites-enabled 进入 Nginx 配置文件目录

  • Nginx 的默认配置文件在 /etc/nginx/sites-enabled/default

• 执行 cat default 查看配置文件

  # Default server configuration
  #
  server {
          listen 80 default_server;
          listen [::]:80 default_server;
  
          # SSL configuration
          #
          # listen 443 ssl default_server;
          # listen [::]:443 ssl default_server;
          #
          # Note: You should disable gzip for SSL traffic.
          # See: https://bugs.debian.org/773332
          #
          # Read up on ssl_ciphers to ensure a secure configuration.
          # See: https://bugs.debian.org/765782
          #
          # Self signed certs generated by the ssl-cert package
          # Don't use them in a production server!
          #
          # include snippets/snakeoil.conf;
  
          root /var/www/html;
  
          # Add index.php to the list if you are using PHP
          index index.html index.htm index.nginx-debian.html;
  
          server_name _;
  
          location / {
                  # First attempt to serve request as file, then
                  # as directory, then fall back to displaying a 404.
                  try_files $uri $uri/ =404;
          }
  
          # pass PHP scripts to FastCGI server
          #
          #location ~ \.php$ {
          #       include snippets/fastcgi-php.conf;
          #
          #       # With php-fpm (or other unix sockets):
          #       fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
          #       # With php-cgi (or other tcp sockets):
          #       fastcgi_pass 127.0.0.1:9000;
          #}
  
          # deny access to .htaccess files, if Apache's document root
          # concurs with nginx's one
          #
          #location ~ /\.ht {
          #       deny all;
          #}
  }
  
  
  # Virtual Host configuration for example.com
  #
  # You can move that to a different file under sites-available/ and symlink that
  # to sites-enabled/ to enable it.
  #
  #server {
  #       listen 80;
  #       listen [::]:80;
  #
  #       server_name example.com;
  #
  #       root /var/www/example.com;
  #       index index.html;
  #
  #       location / {
  #               try_files $uri $uri/ =404;
  #       }
  #}
  
  

  注释写的非常详细。上面的是 default server configuration 默认配置，其中很多一些非必须的配置都是被注释掉的，暂时可以不必关心，主要关注几个配置：

  • listen 80 ：监听 80 端口，也就是 web 的默认端口，可以省略
  • default server ：默认服务。配置文件是可以存在多个 server 的，自上而下匹配，如果不显式指定 default server，第一个服务就是默认服务
  • root /var/www/html ：默认的根目录路径（建议根据实际情况修改为自己项目包的路径）
    • 在 location 里面也可以配置 root 根目录，优先于 server 中的 root 匹配
  • index index.html index.htm index.nginx-debian.html ：这是一些默认的首页名称，Nginx 会逐个去查找。这次部署的这个 vue 项目的首页是 index.html，已经存在了，所以不需要修改，如果部署 php 项目，就需要添加上 index.php 或者自定义的首页（login.html 之类的）
  • server_name _ ：就是一个虚拟主机名称，支持正则表达式。默认的 _ 代表无效名称，暂时不需要更改。

• 执行 vim default 修改配置文件

  修改 root /var/www/html; 为 root /opt/web/demo （就是第三步最后一小步中的目录）

第五步： 重启 Nginx 服务器

• 执行 service nginx restart 重启 Nginx 服务器