Atomで快適にSFTPサーバー上のプロジェクト修正

Atomで快適にSFTPサーバー上のプロジェクト修正

社内の開発環境が強化された!

世間ではITの普及にともなって情報漏洩、脆弱性、不正アクセスなど、セキュリティの強化が問いただされるニュースが日々上がっています。

そんな中で、社内でも至るところでセキュリティが強化されていっています。ここで、今まで使っていた開発環境がSSH+鍵認証になりまして、いつものやり方でプロジェクト修正ができなくなりました。

(いままで社内ネットワークではSSH+PASSだったので、Finderにブクマ登録してそこから直接いじったり、簡単なものはSSHで接続して直接サーバーをいじって修正したり)

そのため、

  • ローカルにマウントして作業(FileZillaでSFTP接続設定+鍵設定)
  • 直接サーバーをいじって修正(簡単なもののみ)
  • という方法で対応していたのですが。
  • 今までより正直めんどくさい(セキュリティが強化される代償なのでしかたのないことだけども)
  • そこで、エディタにPackageを入れて快適なプロジェクト編集をできるよう準備しようと思います。

SublimeText3からAtomへ

実は約1年ほど愛用してきたSublimeText3からAtomに乗り換えました。

というのも、新年度が始まってから個人用のPCが変わりまして、なぜか今使っているmacとSublimeText3の相性が抜群に悪くなってしまったのです(単純にインストールミスとかだったのかもしれないけど)。

とにかくこのままではマズイ!ということで、上司に「これいいよ〜」とすすめていただいたAtomを使い始めました。使い心地はSublimeText3と似た感じなので比較的すんなり入ってきました。

Sublimeと同様でAtomもPackage入れて設定をちゃちゃっとすればOK!って感じですね。

さっそくつまづいた

余裕ぶっこいてたら早速罠にハマりました。

入れたPackageはsftp-deploymentというPackageでした。
設定方法は下記のとおりに進めていきました。

Atom > Preferences…

image24

Install Packages > sftp検索 > SFTP-deploymentをInstall

image19

これを設定すればいいみたいですね

image15

Packages > FTP/SFTP > Map to remote…でSFTP選択

image25

・・・。

Atom「」

・・・。

動かない。

もしかしたらやり方間違ってるのかもしれないですので、もしやり方知ってる人はぜひ教えて下さい。
とはいえ動かないんじゃどうしようもないということで、

image16

気を取り直してやりなおし

remote-ftpというPackageでリトライ。
Install手順は前回と同様なので省略します。
設定は以下のとおり。

File > Open…でNEW FOLDER作成し開く

image26

Packages > Remote-FTP > Toggleで

image17

image21

こんな感じのメッセージが出てきたらOK。

Package > Remote-FTP > Create SFTP config fileで設定内容変更を記載し保存

image14

設定内容はこんな感じで

これで準備は完了です。

いざ接続

このConnectクリックで接続できます。

image23

image22

無事に接続出来ました!

接続したサーバー側に直接追加したり修正したり

image20

一度ローカルに持ってきてからサーバーと同期させたり追加させたり

image18

サクサク快適にいろんなやりたいことが実現できました。
以上がAtomでリアルタイムにサーバー上のファイル修正を行う際の設定方法でした。

それでは、また!

【週刊bitWave】(メルマガ)始めました!
登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでこちらから行うことが可能です。

あなたにおすすめ

仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
Vue.jsで社用登録データフォームを作ってみた... 今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。 「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。 なお、...
「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる... 今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。 そのキーワードとは…… 「Puppeteer」と「LINE Notify」。 「Puppeteer」って何? 「LINE Notify」って...